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

JQUERY FORM VALIDATION CUSTOM ERROR MESSAGE

Demo & example

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

<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<title>jQuery Form Validation Using validator()</title>_x000D_
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> _x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>_x000D_
<style>_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_
</style>_x000D_
</head>_x000D_
<body>_x000D_
<div class="common_box_body test">_x000D_
  <h2>Registration</h2>_x000D_
  <form action="#" name="registration" id="registration">_x000D_
 _x000D_
    <label for="firstname">First Name</label>_x000D_
    <input type="text" name="firstname" id="firstname" placeholder="John"><br>_x000D_
 _x000D_
    <label for="lastname">Last Name</label>_x000D_
    <input type="text" name="lastname" id="lastname" placeholder="Doe"><br>_x000D_
 _x000D_
    <label for="phone">Phone</label>_x000D_
    <input type="text" name="phone" id="phone" placeholder="8889988899"><br>  _x000D_
 _x000D_
    <label for="email">Email</label>_x000D_
    <input type="email" name="email" id="email" placeholder="[email protected]"><br>_x000D_
 _x000D_
    <label for="password">Password</label>_x000D_
    <input type="password" name="password" id="password" placeholder=""><br>_x000D_
 _x000D_
    <input name="submit" type="submit" id="submit" class="submit" value="Submit">_x000D_
  </form>_x000D_
</div>_x000D_
 _x000D_
</body>_x000D_
</html>

_x000D_

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

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

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

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

[jquery] Jquery Validate custom error message location

Examples related to jquery

Examples related to html

Examples related to jquery-validate