Bootstrap With JQuery Validation Plugin

Answer :

for total compatibility with twitter bootstrap 3, I need to override some plugins methods:

// override jquery validate plugin defaults $.validator.setDefaults({     highlight: function(element) {         $(element).closest('.form-group').addClass('has-error');     },     unhighlight: function(element) {         $(element).closest('.form-group').removeClass('has-error');     },     errorElement: 'span',     errorClass: 'help-block',     errorPlacement: function(error, element) {         if(element.parent('.input-group').length) {             error.insertAfter(element.parent());         } else {             error.insertAfter(element);         }     } }); 

See Example: http://jsfiddle.net/mapb_1990/hTPY7/7/

For full compatibility with Bootstrap 3 I added support for input-group, radio and checkbox, that was missing in the other solutions.

Update 10/20/2017: Inspected suggestions of the other answers and added additional support for special markup of radio-inline, better error placement for a group of radios or checkboxes and added support for a custom .novalidation class to prevent validation of controls. Hope this helps and thanks for the suggestions.

After including the validation plugin add the following call:

$.validator.setDefaults({     errorElement: "span",     errorClass: "help-block",     highlight: function (element, errorClass, validClass) {         // Only validation controls         if (!$(element).hasClass('novalidation')) {             $(element).closest('.form-group').removeClass('has-success').addClass('has-error');         }     },     unhighlight: function (element, errorClass, validClass) {         // Only validation controls         if (!$(element).hasClass('novalidation')) {             $(element).closest('.form-group').removeClass('has-error').addClass('has-success');         }     },     errorPlacement: function (error, element) {         if (element.parent('.input-group').length) {             error.insertAfter(element.parent());         }         else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {             error.insertAfter(element.parent().parent());         }         else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {             error.appendTo(element.parent().parent());         }         else {             error.insertAfter(element);         }     } }); 

This works for all Bootstrap 3 form classes. If you use a horizontal form you have to use the following markup. This ensures that the help-block text respects the validation states ("has-error", ...) of the form-group.

<div class="form-group">     <div class="col-lg-12">         <div class="checkbox">             <label id="LabelConfirm" for="CheckBoxConfirm">                 <input type="checkbox" name="CheckBoxConfirm" id="CheckBoxConfirm" required="required" />                 I have read all the information              </label>         </div>     </div> </div> 

I use forms designed only with Twitter Bootstrap 3. I set defaults functions for validor and run only validate method with rules. I use Icons from FontAweSome, but you can use Glyphicons as in doc example.

jQuery.validator.setDefaults({     highlight: function (element, errorClass, validClass) {         if (element.type === "radio") {             this.findByName(element.name).addClass(errorClass).removeClass(validClass);         } else {             $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');             $(element).closest('.form-group').find('i.fa').remove();             $(element).closest('.form-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');         }     },     unhighlight: function (element, errorClass, validClass) {         if (element.type === "radio") {             this.findByName(element.name).removeClass(errorClass).addClass(validClass);         } else {             $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');             $(element).closest('.form-group').find('i.fa').remove();             $(element).closest('.form-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');         }     } }); 

Done. After run validate function:

$("#default-register-user").validate({     rules: {         'login': {             required: true,             minlength: 5,             maxlength: 20         },         'email': {             required: true,             email: true,             minlength: 5,             maxlength: 100         },         'password': {             required: true,             minlength: 6,             maxlength: 25         },         'confirmpassword': {             required: true,             minlength: 5,             maxlength: 25,             equalTo: "#password"         }     } }); 

JSFiddle example