jquery - 使用 jQuery 验证插件显示摘要和单独的错误消息

Question

如何显示 jQuery 插件的单独错误消息和摘要？

我居然找到了a similar question ，但它只是引用了一些我可以使用的钩子(Hook)，但我不知道从哪里开始。

我得到了显示单独的错误消息部分，但我需要在提交时在警报框中显示摘要，并且可以找到插件 here .

刚刚找到了方法，感谢大卫的代码，以及我的后续问题 - 警报框将是“名字:请输入有效的名字”。

代码如下:

$(document).ready(function() {
    var submitted = false;
    ('.selector').validate({
        showErrors: function(errorMap, errorList) {
            if (submitted) {
                var summary = "You have the following errors: \n";
                $.each(errorMap, function(key, value) {
               summary += key + ': ' + value + "\n";
                });
                alert(summary);
                submitted = false;
            }
            this.defaultShowErrors();
        },
        invalidHandler: function(form, validator) {
            submitted = true;
        }
    });
});

Answer 1

正如链接的问题所述，只要显示错误，就会调用 showErrors 回调。您可以使用它来创建摘要并发出警报。然后，您可以调用 this.defaultShowErrors() 来显示正常的各个错误消息。

默认情况下，许多事件(提交、keyup、模糊等)都会调用 showErrors。您可以禁用这些功能，或者使用 invalidHandler 方法，该方法仅在提交无效表单时调用。

示例:

$(document).ready(function() {
    var submitted = false;
    ('.selector').validate({
        showErrors: function(errorMap, errorList) {
            if (submitted) {
                var summary = "You have the following errors: \n";
                $.each(errorList, function() { summary += " * " + this.message + "\n"; });
                alert(summary);
                submitted = false;
            }
            this.defaultShowErrors();
        },          
        invalidHandler: function(form, validator) {
            submitted = true;
        }
    });
});

参见here了解可传递给 validate 方法的选项的完整列表。