Probably a newbie question but I’ll ask anyway. Have a multipage form that I am working on and need to validate multiple fields on multiple pages. For now I am just working on the first page and validating an account number, date of birth (split into 3 select boxes), and an SSN.
I am using the jquery.validate script with JQuery 1.8 and for some reason, when I try to validate the month, day and year selects, it is failing. Any reason why having three html selects would cause the jquery.validate script to fail. FYI, this is bassistance’s jquery.validate script:
<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>
Fiddle for
testing