javascript - jquery验证模态错误，多次触发模态

Question

我在模态中显示 ( http://jqueryvalidation.org/) 错误。

当用户没有填写电子邮件和代码字段时，它会显示一个带有错误消息的模态框，提示他们需要填写这两个字段，我单击关闭，然后它会显示另一个模态框，但它只显示一个错误.有两件事出错了，在我单击模态中的关闭后它不应该显示模态，第二件事:它只在第二个模态出现时显示最后一条错误消息(在第一个模态中单击关闭按钮之后)。

提供的屏幕截图向您展示了我在说什么

我做了一个 count++ 并在控制台打印出来，它不止一次触发 showErrors 方法。我使用错误的方法吗？我使用 showErrors 是因为我可以将错误附加到消息变量，然后在模态中显示它们。

$("#enter-code-form").validate({
    //ignore: [],
    rules: {
        email: {
            required: true,
            email: true,
        },
        code: {
            required: true,
            minlength: 8,
            maxlength: 8,
        },
    },

    messages: {
        code: {
            required: "Please provide a valid code",
            minlength: "You need to provide a eight alpha-numeric code",
            maxlength: "You need to provide a eight alpha-numeric code",
        },
        email: {
            required: "Please provide email",
            email: "Your email address must be in the format of name@domain.com"
        }
    },

    showErrors: function(errorMap, errorList) {
        var message = '';
        var element = '';

        $.each(errorList, function (index, error) {
            message += '<p>' + error.message + '</p>';       
            element += error.element;        
        });

        display_modal('You have an error', message);
        console.log(message);
        // console.log(element);
    }
});

function display_modal(title, message)
{
    $("#error-modal").modal("show");
    $('.modal-title').show().html(title);
    $('.modal-body-message').show().html(message);
}

Answer 1

我不得不改用无效的处理程序:

invalidHandler: function(form, validator) {
    var errors = validator.numberOfInvalids();

    if (errors) {
        var errors = "";

        if (validator.errorList.length > 0) {
            for (x=0;x<validator.errorList.length;x++) {
                errors += "<p>" + validator.errorList[x].message + "</p>";
            }
        }
        display_modal('You have an error', errors);
    }
    validator.focusInvalid();
},