2011-11-12 70 views
1

所以這段代碼看起來很好,我似乎無法看到錯誤來自哪裏。它是在$(文件)。就緒正確包裹(函數(){。Jquery.validate缺失:屬性ID後

$("#signup-form").validate({ 
    rules: { 
     firstname: 'required', 
     signup-email: 'required', 
     signup-password: 'required', 
     signup-password-v: 'required' 
    }, 
    messages: { 
     firstname: 'Your firstname is required!', 
     signup-email: 'Your email is required!', 
     signup-password: 'A password is required!', 
     signup-password-v: 'Please verify your password!' 
    } 
}); 

我叫jquery.validate在HTML head標籤jQuery庫,所以任何想法後?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel='stylesheet' type='text/css' href='./css/index.css' /> 
     <script type="text/javascript" src="./js/jquery-1.6.2.min.js"></script> 
     <script type="text/javascript" src="./js/jquery.validate.js"></script> 
     <script type="text/javascript" src="./js/index.js"></script> 
    </head> 
    <body> 
     <div id="navbar"> 
      <div id="title">CrockShark.com</div> 
     </div> 
     <div id="container"> 
      <div id="navcontainer"> 
       <ul id="navlist"> 
        <li>Find great Crockpot recipes</li> 
        <li>Save 'em</li> 
        <li>Post your own</li> 
        <li>See how many people like yours</li> 
       </ul> 
      </div> 
      <div id="signup"> 
       <form id="signup-form"> 
       <label>First Name:</label> 
        <input type="text" class="signup-input" id ="firstname" name="firstname" /><br /> 
       <label>Last Name:</label> 
        <input type="text" class="signup-input" id="lastname" name="lastname" /><br /> 
       <label>Birthday:</label> 
        <select id="month" name="month"> 
         <option value="1">January</option> 
         <option value="2">February</option> 
         <option value="3">March</option> 
         <option value="4">April</option> 
         <option value="5">May</option> 
         <option value="6">June</option> 
         <option value="7">July</option> 
         <option value="8">August</option> 
         <option value="9">September</option> 
         <option value="10">October</option> 
         <option value="11">November</option> 
         <option value="12">December</option> 
        </select> 
        <select id="day" name="day"> 
         <?php for ($i=1; $i<=31; $i++) { echo "<option value='$i'>$i</option>"; } ?> 
        </select> 
        <select id="year" name="year"> 
         <?php for ($i=2012; $i>=1900; $i=$i-1) { echo "<option value='$i'>$i</option>"; } ?> 
        </select><br /> 
       <label>Email:</label> 
        <input type="text" class="signup-input" id="signup-email" name="signup-email" /><br /> 
       <label>Password:</label> 
        <input type="password" class="signup-input" id="signup-password" name="signup-password" /><br /> 
       <label>Verify Password:</label> 
        <input type="password" class="signup-input" id="signup-password-v" name="signup-password-v" /><br /> 
        <input type="button" id="signup-button" name="signup-button" value="Join!" /> 
      </form> 
      </div> 
      <div id="login"> 
       <div id="login-wrapper"> 
        <label>Email:</label><input type="text" class="login" id="login-email" /><br /> 
        <label>Password:</label><input type="password" class="login" id="login-password" /> 
        <input type="button" id="login-button" value="Login" /> 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 

回答

8

你不能在屬性名破折號:

signup-email: 'Your email is required!', 

我覺得你可以在包裝這些屬性報價,不過,並得到你想要的效果:

'signup-email': 'Your email is required!', 
+0

真棒,你是對的, 非常感謝你! – Nathan

+0

沒問題[填充空間]。 – Blender

0

儘量做到簡單的檢查你的腳本

$(document).ready(function(){ 
$("#signup-form").validate(); 
}); 

幾點提到: -

  1. 而你需要確保表單已提交。

  2. 請確保您有型

  3. 添加必需的領域提交輸入

+0

我改變了輸入提交類型,但沒有任何驗證,我不明白爲什麼。根據螢火蟲所有圖書館都加載完美,但我提交表單時沒有顯示我的消息。 – Nathan

+0

我不知道它是否必須這樣做,我的index.js是一個外部文件? – Nathan

+0

得到它的工作! – Nathan

1

這是jQuery的驗證插件文件的HTML輸入。是指它

http://docs.jquery.com/Plugins/Validation/Reference#Fields_with_complex_names_.28brackets.2C_dots.29

如果您的形式包括使用是不合法的JavaScript標識符,你必須使用規則選項時引用這些名稱的名稱字段:

$("#myform").validate({ 
    rules: { 
    // no quoting necessary 
    name: "required", 
    // quoting necessary! 
    "user[email]": "email", 
    // dots need quoting, too! 
    "user.address.street": "required" 
    } 
});