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

What you should use is the errorLabelContainer

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

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>_x000D_
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>_x000D_
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>_x000D_
_x000D_
<form id="form" method="post" action="">_x000D_
  <input type="text" name="first" />_x000D_
  <input type="text" name="second" />_x000D_
  <div class="errorTxt"></div>_x000D_
  <input type="submit" class="button" value="Submit" />_x000D_
</form>

_x000D_

If you want to retain your structure then

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

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>_x000D_
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>_x000D_
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>_x000D_
_x000D_
<form id="form" method="post" action="">_x000D_
  <input type="text" name="first" data-error="#errNm1" />_x000D_
  <input type="text" name="second" data-error="#errNm2" />_x000D_
  <div class="errorTxt">_x000D_
    <span id="errNm2"></span>_x000D_
    <span id="errNm1"></span>_x000D_
  </div>_x000D_
  <input type="submit" class="button" value="Submit" />_x000D_
</form>

_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

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

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

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

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

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

[jquery] Jquery Validate custom error message location

Examples related to jquery

Examples related to html

Examples related to jquery-validate