A simple handler for forms that add classes on your fields, so you can play with CSS.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
docs
src
.gitignore
.npmignore
LICENSE
README.md
bower.json
gulpfile.js
package-lock.json
package.json
yarn.lock

README.md

version

Modern Form

A simple handler for forms that add classes on your form elements, so you can play with CSS. No jQuery required.


#Install

Using npm command, it’s as simple as this :

npm i izzi-modern-form

If you use bower, you can just do

$ bower i modern-form

Or you can just download the files.

How to use

var modernForm = new ModernForm('.izzi-modern-form');
<form action="" class="izzi-modern-form">
	<!-- your form -->
</form>

You can pass either a html object, or a selector in a string.

Check the demo files for an example.

Options

You can also pass options to the plugin to change it’s default settings, like this:

var modernForm = new ModernForm('.izzi-modern-form', {
	inputSelector: '.input',
	classHasFocus: 'has-focus'
});
Option Default value Type Description
inputSelector .form__input string Define the selector to match the inputs in the form
classHasFocus form__group--has-focus string The class name to be applied when focus happen on an input
classHasContent form__group--has-content string The class name to be applied when an input has some content
onFocus null function A callback function to be called when focus (entering a field) happen
onBlur null function A callback function to be called when blur (leaving a field) happen