所以我现在已经考虑这个特殊问题 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”文本字段，它们不是必需的；但是，我仍然想验证用户在字段中输入的任何输入。即使我将这两个字段的“必需”设置为 false，但验证的行为似乎就像它们是必需的一样。
如果有人能够帮助我确定表单验证行为不正确的原因，请告诉我。我还认为有必要包含此表单的所有代码，因此如果有人需要截断此代码，请告诉我。
提前致谢！