Validation Example Easy integration of the jQuery Validation/Validator plugin by Jörn Zaefferer with Twitter Bootstrap forms.

When I first had a need for this I came across David Cochran’s article which was great however I wanted a global Validator rule since I had many forms within the site I was working on and I didn’t want to include a solution to each form’s instantiation or set of rules. I also needed a solution that worked with Boostraps input append and prepend elements, so I came up with the following.

A snippet from one of my forms to show a regular Boostrap input for the users name and another for the email input that has an append element containing an icon.

The global definition/default for the jQuery Validtion plugin that I included in my layout file. I didn’t want to add a success class to everything like in David’s example. For my situation I only wanted highlighting of inputs on validation errors.

CSS class which I defined in my global/main stylesheet for the error containers to match the red of the Boostrap error classes.