所以我一直在考虑这个特殊问题2个小时......目前我正在尝试使用jQuery中的以下插件验证表单：
http://docs.jquery.com/Plugins/Validation
到目前为止，我有以下代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Patient Form</title>
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css">
<script src="js/html5.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});;
</script>
<script>
$(document).ready(function() {
$("#dateOfBirth").datepicker({
dateFormat : 'mm/dd/yy',
changeMonth : true,
changeYear : true,
yearRange: '-100y:c+nn',
maxDate: '-1d'
}
);
$("#firstNames").validate({
expression: "if (VAL) return true; else return false;",
message: "Please enter your first names (required)."
});
$("#surname").validate({
expression: "if (VAL) return true; else return false;",
message: "Please enter your surname (required)."
});
$("#salutation").validate({
expression: "if (isChecked(SelfID)) return true; else return false;",
message: "Please choose an option (required)."
});
$("#homeAddress").validate({
expression: "if (VAL) return true; else return false;",
message: "Please enter your home address (required)."
});
$("#homePhone").validate({
expression: "if (VAL.match(/^[0-9]*$/) && VAL.length == 9)return true; else return false;",
message: "Please enter your home phone (required - 9 digits) (e.g 034567890)",
required: true,
minlength: 9,
maxlength:9
});
$("#workPhone").validate({
expression: "if (VAL.match(/^[0-9]*$/) && VAL.length == 9)return true; else return false;",
message: "Your work phone requires 9 digits (e.g 034567890)",
required: false, // this should not make this field "required"
minlength: 9,
maxlength:9
});
$("#cellPhone").validate({
expression: "if (VAL.match(/^[0-9]*$/) && VAL.length == 10)return true; else return false;",
message: "Your cell phone requires 10 digits (e.g 02761234567)",
required: false, // this should not make this field "required"
minlength: 10,
maxlength:10
});
$("#occupation").validate({
expression: "if (VAL) return true; else return false;",
message: "Please enter your occupation (required)."
});
$("#dateOfBirth").validate({
expression: "if (VAL) return true; else return false;",
message: "Please enter your date of birth (required)."
});
//checking that a "salutation is selected
function countUnchecked() {
var n = $("input:unchecked").length;
if(n == 0){
$("div").text("Please select a salutation.");
}
}
countUnchecked();
});
</script>
</head>
<body>
<div class="container">
<header>
<h1>Patient Form</h1>
</header>
<article class="intro_page">
<fieldset class="fieldset_form1">
<legend class="legend">Details 1</legend>
<form id="form1" method="post" action="form2.php" enctype="application/x-www-form-urlencoded">
<p class="fontStyle"><label for="firstNames" class="labelStyle_form1">First Names: </label>
<input type="text" name="firstNames" id="firstNames" size="50" maxlength="150"></p>
<p class="fontStyle"><label for="surnames" class="labelStyle_form1">Surname: </label>
<input type="text" name="surname" id="surname" size="50" maxlength="150"></p>
<p class="fontStyle"><label for="salutation" class="labelStyle_form1">Salutation:</label>
<input name="salutation" id="salutation_1" value="Sir" type="radio" >Sir
<input name="salutation" id="salutation_2" value="Dr" type="radio" >Dr
<input name="salutation" id="salutation_3" value="Mr" type="radio" >Mr
<input name="salutation" id="salutation_4" value="Mrs" type="radio" >Mrs
<input name="salutation" id="salutation_5" value="Miss" type="radio" >Miss
<input name="salutation" id="salutation_6" value="Ms" type="radio" >Ms
</p>
<div></div>
<p class="fontStyle"><label for="homeAddress" class="labelStyle_form1">Home Address: </label>
<input type="text" name="homeAddress" id="homeAddress" size="50" maxlength="200"></p>
<p class="fontStyle"><label for="workAddress" class="labelStyle_form1">Work Address: </label>
<input type="text" name="workAddress" id="workAddress" size="50" maxlength="200"></p>
<p class="fontStyle"><label for="homePhone" class="labelStyle_form1">Home Phone: </label>
<input type="text" name="homePhone" id="homePhone"></p>
<p class="fontStyle"><label for="workPhone" class="labelStyle_form1">Work Phone: </label>
<input type="text" name="workPhone" id="workPhone"></p>
<p class="fontStyle"><label for="cellPhone" class="labelStyle_form1">Cell Phone: </label>
<input type="text" name="cellPhone" id="cellPhone"></p>
<p class="fontStyle"><label for="occupation" class="labelStyle_form1">Occupation: </label>
<input type="text" name="occupation" id="occupation" size="50" maxlength="100"></p>
<p class="fontStyle"><label for="dateOfBirth" class="labelStyle_form1">Date of Birth: </label>
<input id="dateOfBirth" name="dateOfBirth"></p>
<p class="buttonsAlign"><input type="button" onClick="location.href='index.php'" class="button blue gradient positionLeft" value="Back">
<input type="submit" class="button blue gradient" value="Next"></p>
</form>
</fieldset>
</article>
<footer>
</footer>
</div>
</body>
</html>
验证大多数字段似乎工作正常，但我无法验证无线电输入选项（“称呼”）。如果未选择无线电选项，我想要一条错误消息（类似于其他成功实现的字段）。
对于“workPhone”和“cellPhone”文本字段，它们不是必需的;但是，我仍然希望验证用户在字段中输入的任何输入。尽管我对这两个字段的“required”设置为false，但验证似乎表现得像是必需的。
如果有人能够帮我确定表单验证行为不正确的原因，请告诉我们。我还认为有必要包含此表单的所有代码，所以如果有人需要这个截断，请告诉我。
提前致谢！
答案 0 :(得分：0)
选择器“：unchecked”不存在，您可以反转选择器，并将条件更改为“大于”
function countUnchecked() {
var n = $("input:radio:not(:checked)").length;
if (n > 0) {
$("div").html("Please select a salutation.");
}
}
答案 1 :(得分：0)
你所做的是错的。在您的按钮上放置一个id或一个唯一的类，并尝试使用单击功能触发错误。忘记你的countUnchecked函数，因为它会在页面加载后一直触发，即使你还没有填写表单。试试这个
$("#buttonid").click(function(){
var n = $("input:radio[name=salutation]:checked").val();
if(!n){
$("div").text("Please select a salutation.");
}
});