jQuery 验证插件不验证元数据

Question

我有一个用于用户输入的基本表单设置(名字、姓氏、电子邮件)。我已经正确导入了 jQuery 和验证插件。我的验证配置是这样的:

$(document).ready(function() {
    $("#form").validate({meta: "validate"});
});

根据插件的文档可以找到here和 here ，这应该意味着我可以为我想要验证的每个输入添加细节。因此，我有这个:

<input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn0">
<input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln1">
<input type="text" name="em" value="" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address.', email:'Please enter a valid email address.'}}}" id="em2">

每个都有自己的标签，我省略了。

我的 CSS 设置如下:

label.error {
    color: red;
    font-weight: bold;
}

在表单上单击提交且所有三个字段均为空白后，名字和姓氏会按预期显示红色错误消息(分别为 Please enter your first name. 和 Please enter your last name.。但是，不会出现电子邮件错误消息。如果我输入了格式无效的电子邮件地址，但仍然没有收到任何消息。我已经用 google 搜索了一段时间并阅读了文档，但我似乎无法查明这可能会失败。

谢谢

注意:为了简单起见，已从我的源代码中编辑了 ID 和名称。

Answer 1

您可能只需要将该类设置为“必需的电子邮件”，而不是当前的验证选项配置。这是适合我的修改后的演示代码:

<input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn0">
<input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln1">
<input type="text" name="em" value="" class="required email" id="em2">

JavaScript 和 CSS 保持不变。

<script type="text/javascript">
$(document).ready(function() {
    $("#form").validate({meta: "validate"});
});
</script>
<style type="text/css" media="screen">
    label.error {
    color: red;
    font-weight: bold;
}
</style>

针对表单字段的每个类集运行验证规则，并将显示每个规则的标准错误。在此示例中，首先运行“必需”规则并显示错误“此字段为必填”，一旦该字段不为空，就会运行“电子邮件”验证规则，直到字段值与规则测试的电子邮件格式匹配。

如果您想对错误消息进行更多控制，可以在“validate”函数调用中传递更多配置，如下所示:

$("#form").validate({
       rules: {
         fn: "required",
         ln: "required",
         em: {
           required: true,
           email: true
         }
       },
       messages: {
         fn: "Please specify your first name",
         ln: "Please specify your last name",
         em: {
           required: "We need your email address to contact you",
           email: "Your email address must be in the format of name@domain.com"
         }
       }
    });