Jquery Validate custom error message location

Question

This looks very simply  but I can t figure it out  I m using the jquery validate plugin  I m trying to validate  lt input name first gt  and  lt input name second gt  to output the error messages into    lt span id  errNm2  gt  lt  span gt   lt span id  errNm1  gt  lt  span gt    I already started writing the errorPlacement  which is where you customize your error message location    How can I put the errors message in those  lt span gt      document  ready function              form   validate           errorPlacement  function error  element                error append     errorTxt span                        rules         lt input type  text  name  first   gt   lt input type  text  name  second   gt    lt div class  errorTxt  gt      lt span id  errNm2  gt  lt  span gt      lt span id  errNm1  gt  lt  span gt   lt  div gt

User · Answer

You can simply create extra conditions which match the fields you require in the same function. For example, using your code above...

$(document).ready(function () {
    $('#form').validate({
        errorPlacement: function(error, element) {
            //Custom position: first name
            if (element.attr("name") == "first" ) {
                $("#errNm1").text(error);
            }
            //Custom position: second name
            else if (element.attr("name") == "second" ) {
                $("#errNm2").text(error);
            }
            // Default position: if no match is met (other fields)
            else {
                 error.append($('.errorTxt span'));
            }
        },
        rules
});

Hope that helps!

User · Answer

if  e attr  name       firstName               firstName  validate   text   error  text          console log   error  html          Try this get text of error object

User · Answer

What you should use is the errorLabelContainer   x000D   x000D  jQuery function      x000D    var validator       form   validate   x000D      rules    x000D        first    x000D          required  true x000D           x000D        second    x000D          required  true x000D          x000D         x000D      messages      x000D      errorElement    div   x000D      errorLabelContainer    errorTxt  x000D        x000D      x000D   errorTxt  x000D    border  1px solid red  x000D    min-height  20px  x000D    x000D   lt script type  text javascript  src  http   code jquery com jquery-1 11 1 js  gt  lt  script gt  x000D   lt script type  text javascript  src  http   cdnjs cloudflare com ajax libs jquery-validate 1 12 0 jquery validate js  gt  lt  script gt  x000D   lt script type  text javascript  src  http   cdnjs cloudflare com ajax libs jquery-validate 1 12 0 additional-methods js  gt  lt  script gt  x000D   x000D   lt form id  form  method  post  action    gt  x000D     lt input type  text  name  first    gt  x000D     lt input type  text  name  second    gt  x000D     lt div class  errorTxt  gt  lt  div gt  x000D     lt input type  submit  class  button  value  Submit    gt  x000D   lt  form gt  x000D   x000D   x000D      If you want to retain your structure then   x000D   x000D  jQuery function      x000D    var validator       form   validate   x000D      rules    x000D        first    x000D          required  true x000D           x000D        second    x000D          required  true x000D          x000D         x000D      messages      x000D      errorPlacement  function error  element    x000D        var placement     element  data  error    x000D        if  placement    x000D            placement  append error  x000D          else   x000D          error insertAfter element   x000D          x000D        x000D        x000D      x000D   errNm1   x000D    border  1px solid red  x000D    x000D   errNm2   x000D    border  1px solid green  x000D    x000D   lt script type  text javascript  src  http   code jquery com jquery-1 11 1 js  gt  lt  script gt  x000D   lt script type  text javascript  src  http   cdnjs cloudflare com ajax libs jquery-validate 1 12 0 jquery validate js  gt  lt  script gt  x000D   lt script type  text javascript  src  http   cdnjs cloudflare com ajax libs jquery-validate 1 12 0 additional-methods js  gt  lt  script gt  x000D   x000D   lt form id  form  method  post  action    gt  x000D     lt input type  text  name  first  data-error   errNm1    gt  x000D     lt input type  text  name  second  data-error   errNm2    gt  x000D     lt div class  errorTxt  gt  x000D       lt span id  errNm2  gt  lt  span gt  x000D       lt span id  errNm1  gt  lt  span gt  x000D     lt  div gt  x000D     lt input type  submit  class  button  value  Submit    gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

JQUERY FORM VALIDATION CUSTOM ERROR MESSAGE  Demo  amp  example   x000D   x000D    document  ready function    x000D        registration   validate   x000D         Specify validation rules x000D      rules    x000D        firstname   required   x000D        lastname   required   x000D        email    x000D          required  true  x000D          email  true x000D                 x000D        phone    x000D          required  true  x000D          digits  true  x000D          minlength  10  x000D          maxlength  10  x000D           x000D        password    x000D          required  true  x000D          minlength  5  x000D          x000D         x000D      messages    x000D        firstname    x000D        required   Please enter first name   x000D                x000D       lastname    x000D        required   Please enter last name   x000D               x000D       phone    x000D        required   Please enter phone number   x000D        digits   Please enter valid phone number   x000D        minlength   Phone number field accept only 10 digits   x000D        maxlength   Phone number field accept only 10 digits   x000D               x000D       email    x000D        required   Please enter email address   x000D        email   Please enter a valid email address    x000D          x000D         x000D     x000D        x000D      x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt title gt jQuery Form Validation Using validator   lt  title gt  x000D   lt script src  https   code jquery com jquery-3 1 1 min js  gt  lt  script gt   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery-validate 1 19 0 jquery validate js  gt  lt  script gt  x000D   lt style gt  x000D     error  x000D      color  red  x000D      x000D    label  x000D    input  x000D    button   x000D      border  0  x000D      margin-bottom  3px  x000D      display  block  x000D      width  100   x000D      x000D    common box body   x000D      padding  15px  x000D      border  12px solid  28BAA2  x000D      border-color   28BAA2  x000D      border-radius  15px  x000D      margin-top  10px  x000D      background   d4edda  x000D    x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt div class  common box body test  gt  x000D     lt h2 gt Registration lt  h2 gt  x000D     lt form action     name  registration  id  registration  gt  x000D    x000D       lt label for  firstname  gt First Name lt  label gt  x000D       lt input type  text  name  firstname  id  firstname  placeholder  John  gt  lt br gt  x000D    x000D       lt label for  lastname  gt Last Name lt  label gt  x000D       lt input type  text  name  lastname  id  lastname  placeholder  Doe  gt  lt br gt  x000D    x000D       lt label for  phone  gt Phone lt  label gt  x000D       lt input type  text  name  phone  id  phone  placeholder  8889988899  gt  lt br gt    x000D    x000D       lt label for  email  gt Email lt  label gt  x000D       lt input type  email  name  email  id  email  placeholder  john doe com  gt  lt br gt  x000D    x000D       lt label for  password  gt Password lt  label gt  x000D       lt input type  password  name  password  id  password  placeholder    gt  lt br gt  x000D    x000D       lt input name  submit  type  submit  id  submit  class  submit  value  Submit  gt  x000D     lt  form gt  x000D   lt  div gt  x000D    x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Add this code in your validate method    errorLabelContainer    errors    and in your html  put simply this where you want to catch the error    lt div id  errors  gt  lt  div gt    All the errors will be held in the div  independently of your input box   It worked very fine for me

User · Answer

HTML   lt form     id   GoogleMapsApiKeyForm  gt               lt input name  GoogleMapsAPIKey  type  text  class  form-control  placeholder  Enter Google maps API key    gt                lt span class  text-danger  id  GoogleMapsAPIKey-errorMsg  gt  lt  span gt                lt button type  submit  class  btn btn-primary  gt Save lt  button gt   lt  form gt    Javascript    function              GoogleMapsApiKeyForm   validate         rules              GoogleMapsAPIKey                  required  true                                messages                GoogleMapsAPIKey   Google maps api key is required                      errorPlacement  function  error  element                if  element attr  name       GoogleMapsAPIKey                       GoogleMapsAPIKey-errorMsg   html error                      submitHandler  function  form                  form submit      if you need Ajax submit follow for rest of code below                          If you want to use ajax         GoogleMapsApiKeyForm   submit function  e            e preventDefault            if       GoogleMapsApiKeyForm   valid                return            Put your ajax call here

User · Answer

This Worked for me   Actually error is a array which contain error message and other values for elements we pass  you can console log error   and see  Inside if condition  error appendTo   element  parents  div   find     errorEmail       Is nothing but finding html element in code and passing the error message          form name  contactUs     validate   rules        message   required       name   required       phone number            required  true          minlength  10          maxlength  10          number  false            email            required  true          email  true          messages        name   Please enter your name       email   Please enter a valid email address       message   Please enter your message       phone number   Please enter a valid mobile number     errorPlacement  function error  element                errorText   empty             if error 0  htmlFor     name                         error appendTo   element  parents  div   find     errorName                        if error 0  htmlFor     email                         error appendTo   element  parents  div   find     errorEmail                        if error 0  htmlFor     phone number                         error appendTo   element  parents  div   find     errorMobile                        if error 0  htmlFor     message                         error appendTo   element  parents  div   find     errorMessage

[jquery] Jquery Validate custom error message location

Examples related to jquery

Examples related to html

Examples related to jquery-validate