Search This Blog

Friday 11 July 2014

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.

Validator




I looked at several scripts in Internet and, after some experiments, I chose:
A free, open source (MIT License) and user friendly extension.

Bootstrap Validator Home Page

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:
Validation Example

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/

No comments:

Post a Comment