そのため、この特定の問題について 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 に設定しましたが、検証は必須のように動作しているようです。
フォームの検証が正しく動作しない理由を特定するのを手伝ってくれる人がいたら、教えてください。また、このフォームのすべてのコードを含める必要があると思ったので、誰かがこれを切り詰める必要がある場合はお知らせください.
前もって感謝します！