我有一个表单,我使用此插件验证:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
我决定在此表单中添加字段,如果使用.toggle()
点击了链接,则会显示这些字段。
以下是表格:
<form id="identification" action="Test.php" method="post">
<fieldset>
<legend>Identification</legend>
<p>
<label for="firstName">First name</label>
<input id="firstName" type="text" name="firstName" class="required"/>
</p>
<p>
<label for="lastName">Last name</label>
<input id="lastName" type="text" name="lastName" class="required"/>
</p>
<p>
<label for="email">E-mail address</label>
<input id="email" type="text" name="email" class="required email"/>
</p>
<div class="hiddenFields">
<p>
<label for="zip">Zip code</label>
<input id="zip" type="text" name="zip" class="required zip"/>
</p>
<p>
<label for="city">City</label>
<input id="city" type="text" name="city" class="required"/>
</p>
</div>
<p class="showFields"><a class="toggle" href="#">Click here</a> for more info</p>
</fieldset>
<p class="submit"><input type="submit" value="Submit"/></p>
</form>
我的CSS中.hiddenFields
div设置为display: none;
。
以下是验证脚本:
$(document).ready(function(){
$("#identification").validate({
rules: {
"zip": { digits:true, minlength:5, maxlength:5 }
}
});
jQuery.extend(jQuery.validator.messages, {
required: "This field is needed.",
email: "Please enter a valid e-mail address.",
digits,minlength,maxlength: "Please enter a valid zip code.",
minlength: "Please enter a valid zip code.",
maxlength: "Please enter a valid zip code."
});
});
这是切换脚本:
$(document).ready(function(){
$("a.toggle").click(function(e){
e.preventDefault();
$(".hiddenFields").toggle("fast");
});
});
现在,没有.hiddenFields
div且没有.toggle()
,一切正常,但是当我尝试添加它时,验证不再有效,我真的不明白为什么。
如果隐藏字段并且不隐藏字段,我如何设法验证此表单?目前它既不适用于这两种情况。
感谢您的帮助。
答案 0 :(得分:1)
你有一个流氓digits,minlength,
导致语法错误:
jQuery.extend(jQuery.validator.messages, {
required: "This field is needed.",
email: "Please enter a valid e-mail address.",
digits,minlength,maxlength: "Please enter a valid zip code.",
minlength: "Please enter a valid zip code.",
maxlength: "Please enter a valid zip code."
});
你还有两次maxlength
。
将其更改为此将修复它:
jQuery.extend(jQuery.validator.messages, {
required: "This field is needed.",
email: "Please enter a valid e-mail address.",
minlength: "Please enter a valid zip code.",
maxlength: "Please enter a valid zip code."
});