使用 jQuery 验证插件为多个字段输出单个错误消息答案

【问题标题】：Using jQuery validate plugin to output a single error message for multiple fields使用 jQuery 验证插件为多个字段输出单个错误消息
【发布时间】：2012-12-05 05:05:11
【问题描述】：

我正在使用 jQuery 验证插件来验证表单。所有字段都是必填字段，并且表单上的错误消息空间有限，因此如果我的规则中的任何字段未完成，是否可以显示一条错误消息，上面写着“必须在提交之前完成所有字段”表格'？

我的 jQuery 知识有限，我只能从示例中了解如何设置它，以便使用以下代码为每个字段输出单独的错误消息：

$(".contact-form").validate({
  errorLabelContainer: ".form-errors",
  wrapper: "li",
  ignore: ".ignore",
  errorElement: "em",
  rules: {
    first_name: { required: true },
    last_name: { required: true },
    email: { required: true, email: true }
  },
  messages: {
    first_name: "Please enter your first name",
    last_name: "Please enter your last name",
    email: { required: "Please enter your email address", email: "Your email address must be in the format of name@domain.com" }
  },
});

【问题讨论】：

JQuery Validate multiple fields with one error的可能重复

标签： jquery jquery-validate

【解决方案1】：

这将满足您的要求：

Javascript

$(".contact-form").validate({
    ignore: ".ignore",
    rules: {
        first_name: {
            required: true
        },
        last_name: {
            required: true
        },
        email: {
            required: true,
            email: true
        }
    }, 
    showErrors: function(errorMap, errorList) {
        $(".form-errors").html("All fields must be completed before you submit the form.");
    }
});

Demo

虽然当有人输入错误的电子邮件地址时，此错误消息不是很好，因为所有字段都已填写，但表单中仍然存在错误。

另外，请注意，您可以通过将其class 属性设置为required 来指定表单中的必填字段：

HTML

<form class="contact-form" type="post" action="">
    <input type="text" name="first_name" id="first_name" class="required" />
    <input type="text" name="last_name" id="last_name" class="required" />
    <input type="email" name="email" id="email" class="required email" />
    <input type="submit" />
    <div class="form-errors"></div>
</form>

Javascript

$(".contact-form").validate({
    showErrors: function(errorMap, errorList) {
        $(".form-errors").html("All fields must be completed before you submit the form.");
    }
});

Demo

【讨论】：

这对 jQuery validate 非常有用，所以谢谢你。另外，感谢有关使用类的提示 - 这将为我节省很多时间！

【解决方案2】：

看起来 invalidHandler 是您所需要的。看看这个例子（来源：http://docs.jquery.com/Plugins/Validation/validate#toptions）：

$(".selector").validate({
   invalidHandler: function(form, validator) {
  var errors = validator.numberOfInvalids();
  if (errors) {
    var message = errors == 1
      ? 'You missed 1 field. It has been highlighted'
      : 'You missed ' + errors + ' fields. They have been highlighted';
    $("div.error span").html(message);
    $("div.error").show();
  } else {
    $("div.error").hide();
  }
}
})

【讨论】：

【解决方案3】：

fxnReqValidation = function (event) {
        $("#errormsg").empty();
        $("input:text").each(function (index, InputElement) {
            var Ele = g_Json[InputElement.name];
            if ((Ele.required) && (InputElement.value == "" || null)) {
                $("#errormsg").append("" + All fields must be completed before you submit the form + "");                
            }           
        });
        event.preventDefault();
    }

这可能对你有帮助。

【讨论】：

【解决方案4】：

您可以使用 toggle() 方法在消息之间切换并使用 jquery 插件...它认为它更快更好且易于编码...

【讨论】：