jquery.validate fails with multiple select inputs

Question

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>

"It's failing" doesn't tell us anything. How is it failing? And show your html. — bhamlin, Dec 04 '12 at 19:48
Remove the comma on the last rule and the last message, and tell us what failing means. — ffffff01, Dec 04 '12 at 19:56
That extra comma will return a syntax error only in IE8 and below, if anyone is wondering http://stackoverflow.com/q/7246618/1331430. But yeah, you're supposed to remove it. — Fabrício Matté, Dec 04 '12 at 20:00
Would be great to see the HTML and know what "failing" means. A jsFiddle demo would be helpful too. — Sparky, Dec 04 '12 at 20:12
Ha. Good catch Enrico! That's what I get for staring at JS all day then looking at basic HTML. I'll add them and retry. — isaac weathers, Dec 05 '12 at 00:05

score 0 · Accepted Answer · answered Dec 05 '12 at 00:13

0

Add values for all the year options
Change the value of "Day", "Month" and "Year" in their respective selects to nothing, an empty string, so validate knows that the user has not selected a value.

Fiddle for testing

answered Dec 05 '12 at 00:13

Enrico

10,377
8
44
55

Like a glove! Thanks Enrico. Sorry for the remedial question. Might as well track me though. This is only page one of a five part form that also has custom validations and needs to behave in Worklight 5.0.2 so I'm sure I'll have at least 20 more questions before it's done. – isaac weathers Dec 05 '12 at 02:13
Glad to hear it :-) I'll keep an eye out for your next questions; I can use the points. – Enrico Dec 05 '12 at 02:22

jquery.validate fails with multiple select inputs

1 Answers1