我正在尝试显示/隐藏div,然后在显示的div中验证并且不验证隐藏的div。
Yes
中选择id_question
,则显示div id="row_id_number"
&验证No
中选择id_question
,则显示div id="row_contact_method"
&amp;验证<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.min.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#id_frm").validate({
rules: {
"id_question": {
required: true
},
"id_number": {
required: true,
minlength: 10,
minlength: 10
},
"contact_method": {
required: true
}
},
messages: {
"id_question": {
required: "Please choose if you have an ID or not."
},
"id_number": {
required: "Please Enter ID."
},
"contact_method": {
required: "Please choose a contact method."
}
},
});
});
</script>
<style type="text/css">
.error {
color: #F00;
}
</style>
</head>
<body>
<form action="" id="id_frm" method="post" name="id_frm">
<div id="row_id_question">
<label>Do you have an ID?</label>
<input type="radio" name="id_question" value="Yes" id="id_question">Yes
<input type="radio" name="id_question" value="No" id="id_question">No<br/>
<label for="id_question" class="error" generated="true"></label>
</div>
</div>
<br/><br/>
<!--display & validate if yes-->
<div id="row_id_number">
<label>Enter ID number</label>
<input name="id_number" type="text" id="id_number" maxlength="10" value=""><br/>
<label for="id_number" class="error" generated="true"></label>
</div>
</div>
<!--end yes-->
<br/><br/>
<!--display & validate if no -->
<div id="row_contact_method">
<label>Preferred Contact Method</label><br/>
<input type="radio" name="contact_method" value="Email" id="contact_method">Email
<input type="radio" name="contact_method" value="Phone" id="contact_method">Phone
<input type="radio" name="contact_method" value="Postal" id="contact_method">Postal<br/>
<label for="contact_method" class="error" generated="true"></label>
</div>
</div>
<!--end no-->
<input type="submit" id="submit_btn" value="Submit">
</form>
</body>
</html>
答案 0 :(得分:0)
默认情况下,jQuery Validate插件会忽略隐藏字段(不验证隐藏的任何内容),因此只需显示/隐藏您的div
元素并让验证自动进行。 (无需对验证规则进行任何修改即可实现此目的。)
$('[name="id_question"]').on('change', function() {
if ($(this).val() == "Yes") {
$('#row_id_number').show();
$('#row_contact_method').hide();
} else {
$('#row_id_number').hide();
$('#row_contact_method').show();
}
});
$("#id_frm").validate({ .... });
由于你从未说过表单最初加载时它应该是什么样子,我已经隐藏了两行,直到选中了收音机。您可以根据需要轻松更改CSS ...
<div id="row_id_number" style="display:none"> .... </div>
和
<div id="row_contact_method" style="display:none"> .... </div>
使用jQuery验证工作DEMO:http://jsfiddle.net/mvzusbh7/
As per jQuery documentation,您的DOM就绪处理程序的语法是 “不推荐” 。
$().ready(function() { .... // <- not recommended
应该是......
$(document).ready(function () { ....
...或
$(function() { ....
你也偶然两次列出了同样的规则......
"id_number": {
required: true,
minlength: 10,
minlength: 10 // <- same rule listed twice
},