Html form validator for Bootstrap

Working with the Flatnuke community for a new version of the CMS I decided to rewrite the dashboard, then I introduced a Bootstrap Admin Template and some useful extensions, the first needed was a validator.

I looked at several scripts in Internet and, after some experiments, I chose:

• http://1000hz.github.io/bootstrap-validator/
• GITHUB: https://github.com/1000hz/bootstrap-validator

A free, open source (MIT License) and user friendly extension.

You can call the script without a line of javascript, in the Bootstrap way using the data-api, just add a data-toggle attribute in the form opening tag:

...

The script follows, as much as possible, the standard HTML5 attributes to define the field type :

• type="email"
• type="url"
• type="number", with additional constraints via max and min attributes
• pattern="Reg(ular )?Exp(ression)?" (for input types of text, search, tel, url or email)
• required

There are only three non-standard attributes called by the magic data- attribute:

• data-match="#inputToMatch", to ensure two fields match, e.g. password confirmations
• data-minlength="5", to enforce a minimum amount of characters
• data-remote="/path/to/remote/validator", to make an AJAX request to determine if the field is valid or not.

Then you can set error messages by a container and two classes:

The error messages are editable by three variables passed again by the data- attribute:

• data-delay: Number of milliseconds to wait before displaying an error on a form field.
• data-html: Insert HTML into the error messages. (not really safe)
• data-errors: Error messages to show for each type of validation.

That's why I liked this 8kb script, just write HTML5 and follow few Bootstrap guidelines and everything works by itself.

SOURCES:

http://1000hz.github.io/bootstrap-validator
http://getbootstrap.com/