2013-01-11 67 views
3

我有一個簡單的註冊表單,它使用jQuery驗證來驗證表單的內容。但它似乎沒有工作。無論頁面頂部的jQuery如何,我的servlet都會觸發並提交無效數據。以下是我的代碼。任何人都可以幫忙嗎?jQuery驗證,驗證不起作用

Script代碼:

<head> 
    <title>Sign Up</title> 
    <meta charset="iso-8859-1"> 
    <link rel="stylesheet" href="style/style.css" type="text/css"> 
    <!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]--> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript"> 
    </script> 
    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"> 
    </script> 
    <script type="text/javascript"> 
     $().ready(function() { 
      // validate the comment form when it is submitted 
      $("#signup").validate(); 

      // validate signup form on keyup and submit 
      $("#signup").validate({ 
       rules: { 
        firstname: "required", 
        lastname: "required", 
        address1: "required", 
        city: "required", 
        county: "required", 
        postcode: "required", 

        password_s: { 
         required: true, 
         minlength: 5 
        }, 
        password_s_con: { 
         required: true, 
         minlength: 5, 
         equalTo: "#password_s" 
        }, 
        email: { 
         required: true, 
         email: true 
        }, 

        agree: "required" 
       }, 
       messages: { 
        firstname: "Please enter your first name", 
        lastname: "Please enter your last name", 
        address1: "Please enter your addres", 
        city: "Please enter your city/town", 
        county: "Please enter your county", 
        postcode: "Please enter your postcode", 

        password: { 
         required: "Please provide a password", 
         minlength: "Your password must be at least 5 characters long" 
        }, 
        confirm_password: { 
         required: "Please provide a password", 
         minlength: "Your password must be at least 5 characters long", 
         equalTo: "Please enter the same password as above" 
        }, 
        email: "Please enter a valid email address", 
        agree: "Please accept our policy" 
       } 
      }); 

     }); 
    </script> 
</head> 

的形式爲:

<table align="left"> 
<tr><td align="left"> 
     <form name="signup" id="signup" action="SignUpServlet" method="post"> 
      <table width="400px" align="right" class=""> 
       <fieldset> 
        <legend>Sign Up:</legend> 
        <tr> 
         <td>First Name:</td> <td><input type="text" id="firstname" name="firstname" required="required">*</td> 
        </tr> 
        <tr> 
         <td>Last Name:</td><td><input type="text" id="lastname" name="lastname" required="required">*</td> 
        </tr> 
        <tr> 
         <td>Address Line 1:</td><td> <input type="text" id="address1" name="address1" required="required">*</td> 
        </tr> 
        <tr> 
         <td>Address Line 2:</td><td> <input type="text" id="address2" name="address2"></td> 
        </tr> 
        <tr> 
         <td>City:</td><td> <input type="text" id="city" name="city" required="required">*</td> 
        </tr> 
        <tr> 
         <td>County:</td><td><input type="text" id="county" name="county" required="required">*</td> 
        </tr> 
        <tr> 
         <td>Postcode:</td> <td><input type="text" id="postcode" name="postcode" required="required">*</td> 
        </tr> 
        <tr> 
         <td>Phone:</td><td> <input type="text" id="phone" name="phone"></td> 
        </tr> 
        <tr> 
         <td>Email Address:</td><td> <input type="text" id="email_s" name="email_s" required="required">*</td> 
        </tr> 
        <tr> 
         <td>Password:</td><td> <input type="password" id="password_s" name="password_s" required="required"></td> 
        </tr> 
        <tr> 
         <td>Confirm Password:</td><td> <input type="password" id="password_s_con" name="password_s_con" required="required"></td> 
        </tr> 
        <tr> 
         <td>Privacy Policy:</td><td> <input type="checkbox" class="checkbox" id="agree" name="agree" required="required"></td> 
        </tr> 
        <tr> 
         <td></td><td> 
          <input type="submit" id="lf_submit" value="submit"></td> 
        </tr> 
       </fieldset> 
      </table> 
     </form> 
    </td></tr> 
<tr><td align="left"> </td></tr> 
</table> 

回答

12

首先,你不需要調用.validate()兩次。這是多餘的和多餘的,所以刪除第一個,自然保留包含選項的那個。

$().ready(function() { 
     // validate the comment form when it is submitted 
     $("#signup").validate(); // <-- REMOVE THIS 

     // validate signup form on keyup and submit 
     $("#signup").validate({ 

.validate()被內DOM Ready調用一次以初始化該表格。所有驗證事件(如submit,keyup等)都是自動的,除非您在插件選項中覆蓋它們。

其次,你是不正確包括jQuery 之後的這個插件。

不管你使用哪種jQuery插件,jQuery的總是需要被首次列入...

<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script> 

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript"></script> 

代碼的工作演示:http://jsfiddle.net/qUYvS/

文檔:http://jqueryvalidation.org/

+0

非常感謝你! – user1851487