使用jQuery驗證插件顯示摘要和單個錯誤消息

Question

如何顯示jQuery插件的各個錯誤消息和摘要？

我實際上發現了一個類似的問題 ，但它只引用了我可以使用的一些鈎子，但我不知道從哪里開始。

我得到了顯示個別錯誤消息的部分，但我需要在提交的警告框中顯示摘要，並且可以在此處找到插件。

剛剛發現了如何，感謝大衛的代碼，以及我的后續問題 - 警報框將是“名字：請輸入有效的名字”。

代碼如下：

$(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調用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方法的選項的完整列表，請參見此處 。