showErrors in JQuery 验证执行多次，如何防止它

Question

我用了几次JQuery Validing，但我不确定为什么现在当我调用JQuery Validing方法时，它会多次调用showErrors并在屏幕上显示错误2次。

$("#submit").on("click", function(){
$( "#divErrorContainer" ).empty();
$("#payment").wrap('<form id="validationForm" />');
$('#validationForm').validate({
'rules': {
'NameOnCard': {
'required': true,
'maxlength': 29
}
},
'messages': {
'NameOnCard': {
'required': 'Please enter the Name as printed on your Credit Card.',
'maxlength': 'Name on Card can contain no more than {0} characters'
}
},
errorElement: 'div',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
showErrors: function (errorMap, errorList) {
$.each(this.successList, function (index, value) {
$.notifyClose();
$(this).closest('.form-group').removeClass('has-error');
});
$.each(errorMap, function (key, value) {
$('#' + key).closest('.form-group').addClass('has-error');
$('#' + key).focus();
});
return $.each(errorList, function (index, value) {
console.log('Error');
$("#divErrorContainer").append( "<p>" + value.message + "</p>" )
});
}
});
var isValid = $('#validationForm').valid();
$("#payment").unwrap();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="payment">
<div id="divErrorContainer"></div>
<input class="form-control textArea" id="NameOnCard" maxlength="29" name="NameOnCard" pattern="[a-zA-Z0-9s]+" placeholder="Name as it appears on your Card" type="text" value="">
</div>
<button id="submit">Submit</button>

我创建了一个JSFiddle - https://jsfiddle.net/pfto8hm7/

Answer 1

您的 jsFiddle 不会像您描述的那样显示两次错误消息。 只有一次。

你也在错误的地方做了太多的事情。 您不应该在showErrors回调中添加/删除类。

仅使用highlight和unhighlight函数添加/删除类。

---

最重要的是，不要将.validate()方法放在提交按钮的click处理程序内。 只需在页面加载时调用.validate()一次即可初始化表单上的插件。 点击事件由此插件自动捕获。