Question

我使用JQuery Validate几次，但我不确定为什么现在当我调用JQuery Validate方法时，它多次调用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-9\s]+" 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()一次即可初始化表单上的插件。点击事件由此插件自动捕获。

jQuery中的showErrors验证多次执行，如何防止它

1 个答案: