jquery.validate失败,有多个选择输入

时间:2012-12-04 19:44:07

标签: jquery validation

可能是一个新手问题,但无论如何我都会问。有一个我正在处理的多页表单,需要验证多个页面上的多个字段。现在我只是在第一页上工作并验证帐号,出生日期(分成3个选择框)和SSN。 我在jQuery 1.8中使用jquery.validate脚本,出于某种原因,当我尝试验证月,日和年选择时,它失败了。有三个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>

1 个答案:

答案 0 :(得分:0)

  1. 为所有年度选项添加值
  2. 将各自选择中的“日”,“月”和“年”的值更改为空,为空字符串,因此验证用户未选择任何值。
  3. testing

    Fiddle