0
因此，我一直在考慮2個小時的這個特定問題現在我正試圖使用jQuery的以下插件驗證表單：在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，驗證似乎表現得像他們所需的。
如果有人能夠幫助我確定表單驗證行爲不正確的原因，請告訴我。我也認爲有必要包含這個表單的所有代碼，所以如果有人需要這個截斷，讓我知道。
在此先感謝！