https://github.com/emmanuelbeziat/izzi-modern-form

A simple handler for forms that add classes on your fields, so you can play with CSS.
https://github.com/emmanuelbeziat/izzi-modern-form

forms javascript

Last synced: about 2 months ago
JSON representation

A simple handler for forms that add classes on your fields, so you can play with CSS.

• Host: GitHub
• URL: https://github.com/emmanuelbeziat/izzi-modern-form
• Owner: EmmanuelBeziat
• License: mit
• Created: 2015-05-09T23:45:16.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-11-02T14:03:50.000Z (about 6 years ago)
• Last Synced: 2024-11-09T23:34:28.161Z (about 2 months ago)
• Topics: forms, javascript
• Language: JavaScript
• Homepage:
• Size: 172 KB
• Stars: 2
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![version](https://img.shields.io/badge/version-2.0.9-orange.svg?style=flat-square)

# 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 :

```bash

npm i izzi-modern-form

```

If you use bower, you can just do

```bash

$ bower i modern-form

```

Or you can just download the files.

# How to use

```javascript

var modernForm = new ModernForm('.izzi-modern-form');

```

```html

	

```

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:

```javascript

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