使用jQuery validate plugin为多个字段输出单个错误消息

Question

我正在使用jQuery validate插件来验证表单.所有字段都是必填字段,并且错误消息的空间在表单上受到限制,因此如果我的规则中的任何字段未完成,则可以显示单个错误消息,其中说:"所有字段必须在您提交之前完成形式'？

我的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" }
  },
});

Answer 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.");
    }
});?

演示

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

另请注意,您可以通过将其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.");
    }
});?

演示