bootstrap-validate

A form validation library compatible with twitter bootstrap, using jquery and html5. This library uses the HTML5 validation attributes.

##Installation##

Include the following on your page:

  • twitter bootstrap
  • jquery (tested under v1.7.1)
  • bootstrap.validate js, css and imgs

##Useage##

<form data-validate="yes">   <fieldset class="control-group">     <label class="control-label">Email</label>     <div class="controls">       <input type="email" name="EMAIL" data-minlength="5" maxlength="100" pattern="[a-z\.][email protected][a-z\.]+" required="required">       <span class="help-inline"></span>     </div>   </fieldset>   <fieldset class="form-actions">     <button type="submit" class="btn btn-primary">Submit</button>   </fieldset> </form>

Adding data-validate="yes" to your form enabled validations automatically. The validator will disable browser native validations with novalidate="novalidate" automatically. The validator attempts to run FIRST before any other submit callback can happen, making it more compatible with ajax callbacks that require validation.

Validations are compatible with HTML5 specifications - pattern, maxlength and required. Minlength is not supported by HTML5, but I have included data-minlength for completeness.

Validations on a given field will not run unless the field is either populated or required="required" is set (or both). This allows you to place validation rules on a field, and still allow blank submissions.

Error/Success messages are automatically populated in the '.help-inline' element that is sibling to the input and both 'success' and 'error' classes are applied to the '.control-group' element.

$('form[data-novalidate=yes]').bootstrapValidate();

You can also turn on the validation for a given form by calling the jQuery plugin $.bootstrapValidate(). This is particularly useful if you are adding forms to the DOM after the page has been rendered.

##TODO##

  • support for radio / checkbox elements