Changing Jquery Validator error location makes it show error multiple times

问题

For some reason when I change the location of the error message per the documentation it then shows the error multiple times.

It will give the error message when I click the submit button and even when I click somewhere else on the body.

It doesn't replace the error message with the appropriate message it just adds the new error below it.

IMG for reference:

Looking to get back to the normal functionality but still change the error location.

HTML:

<form role="form" id="avoForm" action="" method="POST">
  <div class="input-group input-group-newsletter">
     <input type="email" id="email" name="email" class="form-control" placeholder="Enter email..." aria-label="Enter email..." aria-describedby="basic-addon">
     <div class="input-group-append">
       <button class="btn btn-secondary" name="avoForm" type="submit">Blast Off!</button>
    </div>
  </div>
</form>

<div id="errorct"></div>

JQuery:

$("#avoForm").validate({
  rules: {
  email: {
    required: true,
    email: true,
    maxlength: 30
  }
},
errorPlacement: function(error, element) {
   if (element.attr("name") == "email") {
     error.insertAfter("#errorct");
   } else {
     error.insertAfter(element);
   }
 }
});

回答1:

You've told the plugin to put the error message container someplace outside of your form container, thus breaking the plugin's ability to toggle the message properly.

It can easily be fixed by moving your error message into the <form></form> container.

<form role="form" id="avoForm" action="" method="POST">
    <div class="input-group input-group-newsletter">
        <input type="email" id="email" name="email" class="form-control" placeholder="Enter email..." aria-label="Enter email..." aria-describedby="basic-addon">
        <div class="input-group-append">
            <button class="btn btn-secondary" name="avoForm" type="submit">Blast Off!</button>
        </div>
    </div>

    <div id="errorct"></div>
    <!--// dynamic error message will be here - INSIDE FORM //-->

</form>

DEMO: jsfiddle.net/cuzd5zcb/1/

来源：https://stackoverflow.com/questions/49824729/changing-jquery-validator-error-location-makes-it-show-error-multiple-times

标签

jquery

jquery-validate