jQuery Validate Plugin 不验证元数据答案

【问题标题】：jQuery Validate Plugin not validating metadatajQuery Validate Plugin 不验证元数据
【发布时间】：2012-08-12 09:43:17
【问题描述】：

我有一个用于用户输入（名字、姓氏、电子邮件）的基本表单设置。我已经正确导入了 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.。但是，电子邮件没有出现错误消息。如果我输入了一个格式无效的电子邮件地址，但我仍然没有收到任何消息。我已经用谷歌搜索了一段时间并阅读了文档，但我似乎无法确定这可能失败的地方。

谢谢

注意：为了简单起见，我的源代码中已对 ID 和名称进行了编辑。

【问题讨论】：

您使用的是哪个 jquery 验证插件？
我猜你正在使用 jQuery 网站上的验证，你也添加了这个脚本吗？你包括了这个吗？ dev.jquery.com/view/trunk/plugins/validate/lib/…
我编辑了我的问题以反映我正在谈论的插件。这是“basstance”。
在我的代码中，我下载了 jquery.validate.min.js 文件并在本地托管它。同样，验证适用于名字和姓氏字段，但不适用于我的电子邮件字段。
只有电子邮件有问题吗？所有其他人工作正常吗？

标签： jquery jquery-plugins

【解决方案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>

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

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

$("#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"
         }
       }
    });

【讨论】：

这就像一个魅力，这正是我想要的。谢谢！
@MattJohnson，我的回答呢？没有用吗？它赢得了最多的支持
@blasteralfred，我觉得虽然您的回答绝对是一种解决方法，但我希望避免实现进一步的验证器功能，而是根据文档说明的类来使用它。您的回答是 100% 有效的，但不是我想要的方法。不过谢谢！
当之无愧的赏金。 :) 对我来说很棒！

【解决方案2】：

我以前使用过这个插件。据我所知，试试这个，

<script id="demo" type="text/javascript">
jQuery(document).ready(function($) {
    var validator = $("#your_form_id").validate({
        rules: {
            fn: "required",
            ln: "required",
            em: {
                required: true,
                email: true,
            },
        },
        messages: {
            fn: "Please enter your first name.",
            ln: "Please enter your last name.",
            em: {
                required: "Please enter your email address.",
                email: "Please enter a valid email address.",
            },
        },
        errorPlacement: function(error, element) {
                error.appendTo( element.parent().next() );
        },
        success: function(label) {
            label.html("OK").addClass("checked");
        }
    });
});
</script>

在你的 HTML 中；

<input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn"><span class="status"></span><br> 
<input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln"><span class="status"></span><br>
<input type="text" name="em" value="" class="required" id="em"><span class="status"></span><br>

这将在相应输入元素附近向<span class="status"> 显示错误消息。还可以使用 CSS 为您的 success 和 error 消息设置样式；

#your_form_id label.error {
  background:url("error.png") no-repeat 0px 0px;
  color: #CC0000;
}
#your_form_id label.checked {
  background:url("checked.png") no-repeat 0px 0px;
  color: #008000;
}
#your_form_id .success_msg {
  color: #008000;
}

如果你仍然想使用Meta，下面是完整的代码，对我来说很好用

<head>
<script src="jquery-1.6.1.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.metadata.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#commentForm").validate({meta: "validate"});
});
</script>
</head>
<body>
<form id="commentForm" method="post" action="test.php">
<input id="fn0" type="text" name="fn" value="" class="required" title="Please enter your first name."><br />
<input id="ln1" type="text" name="ln" value="" class="required" title="Please enter your last name."><br />
<input id="em2" 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'}}}"/><br />
<input class="submit" type="submit" value="Submit"/>
</form>
</body>

希望这会有所帮助。

【讨论】：

同意这是一个可行的解决方案，但“元”不应该起作用吗？阅读文档，您的方法有效是有道理的，对于功能我可能只是这样实现它，但它没有解释为什么第一种方法没有工作。
它可能不适用于class 属性。你在哪里看到的？
这个页面here，大约在“Meta”页面的中间——它包括一个演示和一个示例。

【解决方案3】：

Meta 可以与已经存在的验证方法一起使用，就像您对 Firstname 和 Lastname 字段所做的那样。要添加您自己的验证方法，请使用以下内容：

$.validator.addMethod('own_method_name', function(value, element){
    var matches = value.match(/[ a-z0-9?%-]+/gi);
    return matches.length > 0 && matches[0] == value;
}, 'Default error message');

还有：

<input type="text" name="em" value="" class="required email own_method_name" id="em2">

注意：在这种情况下（通过元素元的多个规则）您将无法指定自己的错误消息并且只能使用默认错误消息。

【讨论】：