jQuery验证插件没有验证元数据

我有一个用户输入（名，姓，电子邮件）的基本表单设置。我有jQuery和验证插件正确导入。我的验证的配置是这样的：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和名称已被编辑为简单从我的源代码。

来源

2012-08-12 brazilianldsjaguar

这jQuery的验证插件您使用的？ – gmaliar 2012-08-12 09:50:37

我猜你正在使用验证，关闭jQuery网站，你是否也添加了这个脚本？你有包括吗？ http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js – gmaliar 2012-08-12 09:58:53

我编辑了我的问题以反映我正在谈论的插件。这是“勉强”的一个。 – brazilianldsjaguar 2012-08-14 20:05:58

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

<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 [email protected]" 
     } 
     } 
    });

来源

2012-08-19 11:35:13 Rohit

这就像一个魅力，这正是我正在寻找。谢谢！ – brazilianldsjaguar 2012-08-21 17:30:17

@MattJohnson，我的答案呢？它不工作？它已经赢得了大多数赞同 – 2012-08-22 10:18:05

@blasteralfred，我觉得虽然你的答案肯定是一个解决办法，但我希望避免实施进一步的验证功能，而是根据文档说明它可以基于类使用它。你的答案是100％有效，但不是我想要的方法。谢谢你！ – brazilianldsjaguar 2012-08-22 18:21:35

我以前有过使用此插件的经验。据我所知，试试这个，

<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>

希望这有助于。

来源

2012-08-15 06:40:25

同意这是一个可行的解决方案，但不是“元”应该工作？阅读文档，你的方法是有效的，对于功能我可以直接实现它，但它不能解释为什么第一种方法*没有工作。 – brazilianldsjaguar 2012-08-15 17:17:30

它可能无法在'class'属性上工作。你在哪里见过？ – 2012-08-15 17:21:20

这个页面（在这里）（http://docs.jquery.com/Plugins/Validation/validate），大约在它说“Meta”的页面的中间 - 它包括一个演示和一个例子。 – brazilianldsjaguar 2012-08-15 19:05:37

Meta可以与已存在的验证方法一起使用，正如您正确地为名字和姓氏字段所做的那样。（通过元素的荟萃多个规则）在这种情况下，你失去指定自己的错误的能力：要添加自己的验证方法，使用这样的事情：

$.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">

注意消息并且只能使用默认的消息。

来源

2012-08-16 13:59:02

jQuery验证插件没有验证元数据

回答

相关问题