Bootstrap with jQuery Validation Plugin

Question

I am trying to add validation to my form with jQuery Validation Plugin, but I'm having a problem where the plugin puts the error messages when I'm using input groups.

the problem

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

My code: http://jsfiddle.net/hTPY7/4/

User · Answer

For the bootstrap 4 beta were some big changes between the alpha and beta versions of bootstrap (and also bootstrap 3), esp. in regards to form validation.

First, to place the icons correctly you'll need to add styling which equates to what was in bootstrap 3 and no longer in bootstrap 4 beta...here's what I'm using

.fa.valid-feedback,
.fa.invalid-feedback {
    position: absolute;
    right: 25px;
    margin-top: -50px;
    z-index: 2;
    display: block;
    pointer-events: none;
}

.fa.valid-feedback {
    margin-top: -28px;
}

The classes have also changed as the beta uses the 'state' of the control rather than classes which your posted code doesn't reflect, so your above code may not work. Anyway, you'll need to add 'was-validated' class to the form either in the success or highlight/unhighlight callbacks

$(element).closest('form').addClass('was-validated');

I would also recommend using the new element and classes for form control help text

errorElement: 'small',
errorClass: 'form-text invalid-feedback',

User · Answer

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.

enter image description here

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

User · Answer

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>

User · Answer

This makes up the fields       form questionario   validate                   debug  false                  errorElement   span                   errorClass   help-block                   highlight  function  element  errorClass  validClass                          element  closest   form-group   addClass  has-error                                       unhighlight  function  element  errorClass  validClass                          element  closest   form-group   removeClass  has-error                                       errorPlacement  function  error  element                        if  element parent   input-group   length    element prop  type        checkbox     element prop  type        radio                             error insertBefore element parent                           else                           error insertAfter element                                                               Specify the validation rules                 rules                             campo1      required                            campo2      required                            campo3      required                            campo4      required                            campo5      required                                              submitHandler  function  form                        form submit

User · Answer

Adding onto Miguel Borges answer above you can give the user that green success feedback by adding the following line to in the highlight unhighlight code block       highlight  function element              element  closest   form-group   removeClass  has-success   addClass  has-error               unhighlight  function element              element  closest   form-group   removeClass  has-error   addClass  has-success

User · Answer

add radio-inline fix to this https   stackoverflow com a 18754780 966181    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 if  element parent   radio-inline   length                error insertAfter element parent   parent               else               error insertAfter element

User · Answer

Here is what I use when adding validation to form:

// Adding validation to form.
        $(form).validate({
            rules: {
                title: {
                    required: true,
                    minlength: 3,
                },
                server: {
                    ipAddress: true,
                    required: true
                }   
            },
            highlight: function(element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function(element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorClass: 'help-block'
        });

This worked for me for Bootstrap 3 styling when using the jquery validation library.

User · Answer

DARK DIESEL s answer worked great for me  here s the code for anyone who wants the equivalent using glyphicons   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  span glyphicon   remove                  element  closest   form-group   append   lt span class  glyphicon glyphicon-remove form-control-feedback  aria-hidden  true  gt  lt  span gt                          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  span glyphicon   remove                  element  closest   form-group   append   lt span class  glyphicon glyphicon-ok form-control-feedback  aria-hidden  true  gt  lt  span gt

User · Answer

I know this question is for Bootstrap 3  but as some Bootstrap 4 related question are redirected to this one as duplicates  here s the snippet Bootstrap 4-compatible     validator setDefaults       highlight  function element              element  closest   form-group   addClass  has-danger               unhighlight  function element              element  closest   form-group   removeClass  has-danger               errorElement   small       errorClass   form-control-feedback d-block       errorPlacement  function error  element            if element parent   input-group   length                error insertAfter element parent               else if element prop  type        checkbox                 error appendTo element parent   parent   parent               else if element prop  type        radio                 error appendTo element parent   parent   parent               else               error insertAfter element                          The few differences are    The use of class has-danger instead of has-error Better error positioning radios and checkboxes

User · Answer

Try using this sample code  Using the Jquery validation plugin and additional methods  This is the working code for my project  Hope this helps you     x000D   x000D    jquery validation booking page x000D    x000D      Wait for the DOM to be ready x000D    function     x000D       Initialize form validation on the registration form  x000D       It has the name attribute  registration  x000D       form name  book     validate   x000D       on key up validation x000D     onkeyup  function element    x000D          element  valid     x000D           x000D         Specify validation rules x000D      rules    x000D           The key name on the left side is the name attribute x000D           of an input field  Validation rules are defined x000D           on the right side x000D        fname    x000D          required  true  x000D          lettersonly  true x000D             x000D        lname   x000D          required  true  x000D          lettersonly  true x000D             x000D        email    x000D          required  true  x000D             Specify that email should be validated x000D             by the built-in  email  rule x000D          email  true x000D           x000D        password    x000D          required  true  x000D          minlength  5 x000D          x000D         x000D         Specify validation error messages x000D      messages    x000D        fname    x000D        required  Please enter your firstname   x000D        lettersonly  Letters allowed only  x000D           x000D        lname    x000D        required  Please enter your lastname   x000D        lettersonly  Letters allowed only  x000D           x000D        email   Please enter a valid email address  x000D         x000D         Make sure the form is submitted to the destination defined x000D         in the  action  attribute of the form when valid x000D      submitHandler  function form    x000D        form submit    x000D        x000D        x000D      x000D   error   x000D    color  red  x000D    margin-left  5px  x000D    font-size 15px  x000D    x000D   lt script src  design bootstrap-3 3 7-dist js jquery validate js  gt  lt  script gt  x000D   lt script src  design bootstrap-3 3 7-dist js additional-methods js  gt  lt  script gt  x000D   x000D   lt form name  book  id  book  action    method  post  gt  x000D   x000D       lt div class  row form-group  gt  x000D           lt div class  col-md-6   gt  x000D               lt label class    for  fname  gt First Name lt  label gt  x000D               lt input type  text  name  fname  id  fname  class  form-control  placeholder  First Name  gt  x000D           lt  div gt  x000D           lt div class  col-md-6  gt  x000D               lt label class    for  lname  gt Last Name lt  label gt  x000D               lt input type  text  name  lname  id  lname  class  form-control  placeholder  Last Name  gt  x000D           lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  row form-group  gt  x000D           lt div class  col-md-6   gt  x000D               lt label class    for  date  gt Date lt  label gt  x000D               lt input type  text  id  date  class  form-control datepicker px-2  placeholder  Date of visit  gt  x000D           lt  div gt  x000D           lt div class  col-md-6  gt  x000D               lt label class    for  email  gt Email lt  label gt  x000D               lt input type  email  name  email  id  email  class  form-control  placeholder  Email  gt  x000D           lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  row form-group  gt  x000D           lt div class  col-md-12  gt  x000D               lt label class    for  treatment  gt Service You Want lt  label gt  x000D               lt select name  treatment  id  treatment  class  form-control  gt  x000D                   lt option value    gt Hair Cut lt  option gt  x000D                   lt option value    gt Hair Coloring lt  option gt  x000D                   lt option value    gt Perms and Curls lt  option gt  x000D                   lt option value    gt Hair Conditioning lt  option gt  x000D                   lt option value    gt Manicure lt  option gt  x000D                   lt option value    gt Pedicure lt  option gt  x000D                   lt option value    gt Nails Extension lt  option gt  x000D                   lt option value    gt Nail Design lt  option gt  x000D                   lt option value    gt Waxing Eyebrows lt  option gt  x000D                   lt option value    gt Waxing Hands Legs lt  option gt  x000D                   lt option value    gt Full Face Waxing lt  option gt  x000D                   lt option value    gt Full Body Body Parts Wax lt  option gt  x000D               lt  select gt  x000D           lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  row form-group  gt  x000D           lt div class  col-md-12  gt  x000D               lt label class    for  note  gt Notes lt  label gt  x000D               lt textarea name  note  id  note  cols  30  rows  5  class  form-control  placeholder  Write your notes or questions here     gt  lt  textarea gt  x000D           lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  row form-group  gt  x000D           lt div class  col-md-12  gt  x000D               lt center gt  lt input type  submit  value  Book Now  class  btn btn-primary btn-lg  gt  lt  center gt  x000D           lt  div gt  x000D       lt  div gt  x000D   x000D   lt  form gt  x000D   x000D   x000D

User · 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

User · Answer

I used this for radio s       if  element prop  type        checkbox     element prop  type        radio             error appendTo element parent   parent               else if  element parent   input-group   length            error insertAfter element parent               else           error insertAfter element           this way the error is displayed under last radio option

User · Answer

Another option is placing an error container outside of your form group ahead of time   The validator will then use it if necessary    lt div class  form-group  gt     lt label class  control-label  for  new-task-due-date  gt When is the task due  lt  label gt     lt div class  input-group date datepicker  gt       lt input type  text  id  new-task-due-date  class  required form-control date  name  dueDate    gt       lt span class  input-group-addon  gt         lt span class  glyphicon glyphicon-calendar  gt  lt  span gt       lt  span gt                               lt  div gt     lt label for  new-task-due-date  class  has-error control-label  style  display  none   gt  lt  label gt   lt  div gt

User · Answer

this is the solution you need  you can use the errorPlacement method to override where to put the error message     form   validate       rules            firstname                minlength  3              maxlength  15              required  true                    lastname                minlength  3              maxlength  15              required  true                      errorPlacement  function error  element            error insertAfter   form-group      So i putted it after the  form-group so it will not include to your append prepend group              highlight  function element              element  closest   form-group   addClass  has-error               unhighlight  function element              element  closest   form-group   removeClass  has-error                it s works for me like magic  Cheers

User · Answer

for bootstrap 4 this work with me good         validator setDefaults       highlight  function element              element  closest   form-group   find   form-control first   addClass  is-invalid               unhighlight  function element              element  closest   form-group   find   form-control first   removeClass  is-invalid              element  closest   form-group   find   form-control first   addClass  is-valid                errorElement   span       errorClass   invalid-feedback       errorPlacement  function error  element            if element parent   input-group   length                error insertAfter element parent               else               error insertAfter element                         hope it will help

[twitter-bootstrap] Bootstrap with jQuery Validation Plugin

The answer is

Examples related to twitter-bootstrap

Examples related to jquery-validate

Examples related to twitter-bootstrap-3

Tags