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

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

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

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

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

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

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

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   lt i class  fa fa-exclamation fa-lg form-control-feedback  gt  lt  i 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  i fa   remove                  element  closest   form-group   append   lt i class  fa fa-check fa-lg form-control-feedback  gt  lt  i gt                           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

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

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

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   amp  amp  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    lt div class  form-group  gt       lt div class  col-lg-12  gt           lt div class  checkbox  gt               lt label id  LabelConfirm  for  CheckBoxConfirm  gt                   lt input type  checkbox  name  CheckBoxConfirm  id  CheckBoxConfirm  required  required    gt                  I have read all the information               lt  label gt           lt  div gt       lt  div gt   lt  div gt

[twitter-bootstrap] Bootstrap with jQuery Validation Plugin

Examples related to twitter-bootstrap

Examples related to jquery-validate

Examples related to twitter-bootstrap-3