初歩的な質問かもしれませんが質問させてください。私が取り組んでいる複数ページのフォームがあり、複数のページで複数のフィールドを検証する必要があります。今のところ、私は最初のページに取り組んでおり、アカウント番号、生年月日 (3 つの選択ボックスに分割)、および SSN を検証しています。JQuery 1.8 で jquery.validate スクリプトを使用していますが、何らかの理由で月、日、年の選択を検証しようとすると失敗します。3 つの html 選択があると jquery.validate スクリプトが失敗する理由。参考までに、これは Bassistance の jquery.validate スクリプトです。
<script type="text/javascript" src="jqueryBase/jquery-1.8.3.js"></script>
<script src="jqueryBase/jquery.validate.js"></script>
<script src="jqueryBase/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
$("#accountNumber").mask("9999-9999-9999-9999");
$("#ssn").mask("999-99-9999");
// validate signup form on keyup and submit
$("#accountInformation").validate({
rules: {
firstname: "required",
lastname: "required",
accountNumber: {
required: true,
maxlength: 16
},
ssn: {
required: true,
minlength: 9
},
month: {
required: true,
},
day: {
required: true,
},
year: {
required: true,
},
},
messages: {
accountNumber: "Please enter your Account Number",
month: {
required: "Please select the month you were born",
},
password: {
required: "Please select the day you were born",
},
confirm_password: {
required: "Please select the year you were born",
},
ssn: {
required: "Please enter your Social Security Number",
},
}
});
});
</script>
`<div id="main">`
`<p>Step 1 - Account Information</p>`
`<form class="cmxform" id="accountInformation" method="post" action="page2.html">`
`<fieldset>`
`<p>`
`<label for="accountNumber">Account Number</label>`
`<input id="accountNumber" name="accountNumber" placeholder="XXXXXXXXXXXXXXXX" type="tel" size="32" />`
`</p>`
<label for="dob">Date of Birth</label>
<table class="tabless">
<tr>
<td><select name="month" data-theme="e">
<option selected="" value="Default">Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="Decemeber">December</option>
</select></td>
<td><select name="day">
<option selected="" value="Default">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select></td>
<td><select name="year">
<option selected="" value="Default">Year</option>
<option value="">1944</option>
<option value="">1945</option>
<option value="">1946</option>
<option value="">1947</option>
<option value="">1948</option>
<option value="">1949</option>
<option value="">1950</option>
<option value="">1951</option>
<option value="">1952</option>
<option value="">1953</option>
<option value="">1954</option>
<option value="">1955</option>
<option value="">1956</option>
<option value="">1957</option>
<option value="">1958</option>
<option value="">1959</option>
<option value="">1960</option>
<option value="">1961</option>
<option value="">1962</option>
<option value="">1963</option>
<option value="">1964</option>
<option value="">1965</option>
<option value="">1966</option>
<option value="">1967</option>
<option value="">1968</option>
<option value="">1969</option>
<option value="">1970</option>
<option value="">1971</option>
<option value="">1972</option>
<option value="">1973</option>
<option value="">1974</option>
<option value="">1975</option>
<option value="">1976</option>
<option value="">1977</option>
<option value="">1978</option>
<option value="">1979</option>
<option value="">1980</option>
<option value="">1981</option>
<option value="">1982</option>
<option value="">1983</option>
<option value="">1984</option>
<option value="">1985</option>
<option value="">1986</option>
<option value="">1987</option>
<option value="">1988</option>
<option value="">1989</option>
<option value="">1990</option>
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
<option value="">1996</option>
<option value="">1997</option>
<option value="">1998</option>
<option value="">1999</option>
<option value="">2000</option>
<option value="">2001</option>
<option value="">2002</option>
<option value="">2003</option>
<option value="">2004</option>
<option value="">2005</option>
<option value="">2006</option>
<option value="">2007</option>
<option value="">2008</option>
<option value="">2009</option>
<option value="">2010</option>
<option value="">2011</option>
</select></td>
</tr>
</table>
<p>
<label for="accountNumber">Social Security Number</label>
<input type="tel" id="ssn" name="ssn" maxlength="9" placeholder="XXX-XX-XXXX" size="32" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>