更改 Jquery 验证器错误位置会使其多次显示错误

Question

出于某种原因，当我更改错误消息的位置时 per the documentation 它会多次显示错误。

当我点击提交按钮时，甚至当我点击正文的其他地方时，它都会给出错误信息。

它不会用适当的消息替换错误消息，它只是在其下方添加新错误。

IMG供参考：

希望恢复正常功能但仍更改错误位置。

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);
   }
 }
});

Answer 1

您已告诉插件将错误消息容器放在 form 容器外部的某处，从而破坏了插件正确切换消息的能力。

将您的错误消息移到 <form></form> 容器中即可轻松修复。

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

演示：jsfiddle.net/cuzd5zcb/1/

更改 Jquery 验证器错误位置会使其多次显示错误

Changing Jquery Validator error location makes it show error multiple times

jquery

jquery-validate