在提交按钮上单击两次时覆盖 Jquery 错误消息答案

【问题标题】：Overwrite Jquery error message when click twice on submit button在提交按钮上单击两次时覆盖 Jquery 错误消息
【发布时间】：2013-06-04 07:14:07
【问题描述】：

我在 jquery 表单验证中使用showErrors 在表单顶部显示错误消息。一次我想显示一条错误消息。在我的表单name,email,url and comment 中有四个可用字段。如果用户在没有输入任何数据的情况下直接单击提交按钮，则会显示name 字段的错误，但是当用户关注email 字段时，它会覆盖name 和email 的错误消息。

jQuery :-

$(document).ready(function(){
    $("form").validate({
    messages: {
         name: "Please specify your name.",
         email: {
           required: "We need your email address to contact you.",
           email: "Your email address must be in the format of name@domain.com."
         },
         url: "A valid URL, please.",
         comment: "Please enter your comment."
       },
    showErrors: function(errorMap, errorList) {
            if(errorList.length) {
                $("span").html(errorList[0].message);
            }
        }
    });
});

这里是小提琴：- http://jsfiddle.net/roop1886/q64VE/

【问题讨论】：

你只显示errorList[0]，所以它只能显示一个错误。
是的，我想一次显示一条错误消息。
当您在一个字段中并在您键入时进行验证时，errorList 仅包含该字段的错误。
看，如果用户点击提交按钮而不是显示name的错误，这是正确的，但如果用户关注email字段并再次点击提交按钮，那么它应该显示错误消息name。现在它是覆盖名称和电子邮件的错误消息。
为了什么？它正在做你说它应该做的事情。

标签： jquery validation jquery-validate

【解决方案1】：

解决方案：- 我在$("form").validate() 函数中添加了@Barmar 建议的focusInvalid: false,。

$(document).ready(function(){
    $("form").validate({
   focusInvalid: false,
    messages: {
         name: "Please specify your name.",
         email: {
           required: "We need your email address to contact you.",
           email: "Your email address must be in the format of name@domain.com."
         },
         url: "A valid URL, please.",
         comment: "Please enter your comment."
       },
    showErrors: function(errorMap, errorList) {
            if(errorList.length) {
                $("span").html(errorList[0].message);
            }
        }
    });
});

【讨论】：