Bootstrap Validator - Best jQuery plugin to validate form fields

Download   Demo

Demos

Basic

• Adjusting feedback icon position


• Set validator options via HTML 5 attributes


• Play with HTML 5 input types and attributes


• Validate a form placed inside a Bootstrap modal


• Use multiple elements with the same name


• Toggle field

Advance

• Adding dynamic field


• Using Ajax to submit the form


• Changing default behaviour


• Complex form


• Enable/disable validator


• Overriding default options


• Showing messages in custom area


• Showing required icon for the mandatory fields


• Showing valid message

Bootstrap Validator is a best jQuery plugin to validate form fields. Designed to use with Bootstrap 3

Code

• Written from scratch


• Very solid and clean


• Core and validators code are separated


• JSHint free

HTML 5

• Fully support declarative settings


• Support HTML 5 attributes


• Support HTML 5 input types

Validators

• Provide 48 built-in validators and counting!


• Easy to write a new validator


• Internationalization

Friendly

• Show feedback icons based on field validity


• Focus on the first invalid field


• Don’t validate until given length


• Possible to show errors as tooltip/popover

Flexible

• Define field by name or CSS selector


• Possible to indicate excluded fields


• Enable/disable validators on the fly


• Support dynamic option


• Support dynamic fields


• Support dynamic messages

Compatibility

• Bootstrap Multiselect


• Chosen


• Color Picker, Date Picker


• iCheck


• Select2

 

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>

<script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>

<!-- Either use the compressed version (recommended in the production site) -->
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>

If you want to use the default message translated in the language package, then finally include it:

<script type="text/javascript" src="/path/to/src/js/language/languagecode_COUNTRYCODE.js"></script>

2. HTML

<form>
 <div class="form-group">
 <label>Username</label>
 <input type="text" class="form-control" name="username" />
 </div>
 <div class="form-group">
 <label>Email address</label>
 <input type="text" class="form-control" name="email" />
 </div>
</form>

3. JAVASCRIPT

$(document).ready(function() 
 $('form').bootstrapValidator(
 message: 'This value is not valid',
 feedbackIcons: 
 valid: 'glyphicon glyphicon-ok',
 invalid: 'glyphicon glyphicon-remove',
 validating: 'glyphicon glyphicon-refresh'
 ,
 fields: 
 username: 
 message: 'The username is not valid',
 validators: 
 notEmpty: 
 message: 'The username is required and cannot be empty'
 ,
 stringLength: 
 min: 6,
 max: 30,
 message: 'The username must be more than 6 and less than 30 characters long'
 ,
 regexp: 
 regexp: /^[a-zA-Z0-9_]+$/,
 message: 'The username can only consist of alphabetical, number and underscore'
 
 
 ,
 email: 
 validators: 
 notEmpty: 
 message: 'The email is required and cannot be empty'
 ,
 emailAddress: 
 message: 'The input is not a valid email address'
 
 
 
 
 );
);

Bootstrap Validator - Best jQuery plugin to validate form fields