使用jQuery验证插件显示摘要和单个错误消息

时间:2010-05-17 11:55:20

标签: jquery ajax validation jquery-validate

如何显示jQuery插件的各个错误消息和摘要?

我实际上找到了a similar question ,但它只引用了我可以使用的一些钩子,但我不知道从哪里开始。

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

刚刚知道如何,感谢David的代码以及我的后续问题 - 警告框将是“名字:请输入有效的名字”。

以下代码:

$(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;
        }
    });
});

1 个答案:

答案 0 :(得分:22)

如链接问题所示,只要显示错误,就会调用showErrors回调。您可以使用它来创建摘要并提醒它。然后,您可以致电this.defaultShowErrors()以显示正常的个别错误消息。

默认情况下,会为很多事件(提交,键盘,模糊等)调用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;
        }
    });
});

有关可以传递给validate方法的选项的完整列表,请参阅here