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 could just download the files on GitHub.
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 |