我有一个用户输入的基本表单设置(名字,姓氏,电子邮件).我有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;
}
单击提交后,在所有三个字段为空白的表格上,名字和姓氏显示预期的红色错误消息(请输入您的名字.请分别输入您的姓氏.但是,没有出现错误消息电子邮件.如果我放了一个格式无效的电子邮件地址,我仍然没有收到任何消息.我已经google了一段时间并阅读了文档,但我似乎无法确定这可能会失败的地方.
谢谢
注意：为了简单起见,我的源代码编辑了ID和名称.
解决方法
您可能只需要将类设置为“必需的电子邮件”而不是当前的验证选项配置.以下是适用于我的修改后的演示代码：
<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>
为表单字段的每个类集运行验证规则,并将显示每个规则的标准错误.在此示例中,首先运行“required”规则并显示错误“此字段是必需的”,并且一旦字段不为空,则运行“email”验证规则,直到字段值与规则测试的电子邮件格式匹配.
如果您想要更多地控制错误消息,可以在“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"
}
}
});