showErrors в JQuery validate выполняется несколько раз, как это предотвратить

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() ОДИН раз при загрузке страницы, чтобы инициализировать плагин в вашей форме. Событие click фиксируется автоматически этим плагином.