更改Jquery Validator错误位置使其多次显示错误 [英] 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供参考:

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

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

推荐答案

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

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.

可以通过将错误消息移到<form></form>容器中轻松解决该问题.

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>

演示: jsfiddle.net/cuzd5zcb/1/

DEMO: jsfiddle.net/cuzd5zcb/1/

这篇关于更改Jquery Validator错误位置使其多次显示错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！