如何在jQuery中進行客戶端表單驗證？

Question

我想使用這個插件：http://docs.jquery.com/Plugins/Validation

哪裏#user_new是我的形式ID，這是我的代碼如下所示：

$('#user_new').validate({ 
    rules: { 
     user[username]: "required", 
     user[email]: { 
      required: true, 
      email: true 
     } 
    }, 
    messages: { 
     user[username]: "Please specify your name", 
     user[email]: { 
      required: "We need your email address to contact you", 
      email: "Your email address must be in the format of name@domain.com" 
     } 
    } 
}) 

在這些是我怎麼輸入字段時看呈現頁面時（由Rails的生成）：

<input class="clearField curved" id="user_f_name" name="user[f_name]" size="30" type="text" value="First Name" /><br /> 
     <input class="clearField curved" id="user_l_name" name="user[l_name]" size="30" type="text" value="Last Name" /><br /> 
     <input class="clearField curved" id="user_username" name="user[username]" size="30" type="text" value="Username" /><br /> 
     <input class="clearField curved" id="user_password" name="user[password]" size="30" type="password" value="Password" /><br /> 
     <input class="clearField curved" id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" value="Password" /><br /> 
     <input class="clearField curved" id="user_email" name="user[email]" size="30" type="text" value="Email Address" /><br /> 

我只是想先驗證用戶名&電子郵件。然後從那裏拿走。

對於我的生活，我無法弄清楚如何指定使用此插件的語法和規則。

幫助！

EDIT1：這裏是表單標籤的HTML輸出：

<form accept-charset="UTF-8" action="https://stackoverflow.com/users/login" class="user_new" id="user_new" method="post"> 

至於有關調試的問題，當我把它給像這樣：

$('#user_new').validate({ 
    debug: true, 
    rules: { 
     user_username: "required", 
     user_email: { 
      required: true, 
      email: true 
     } 
    }, 
    messages: { 
     user_username: "Please specify your name", 
     user_email: { 
      required: "We need your email address to contact you", 
      email: "Your email address must be in the format of name@domain.com" 
     } 
    } 
}); 

我什麼也看不到我的JS安慰。

編輯2：當我清除我的數據登錄字段並按提交時，它不會提交。不知道這是否與實際工作的validate（）函數有關。但是我看不到任何消息彈出或類似的東西。

EDIT3：看來這個問題可能是之間的ID &姓名字段被命名不同的脫節。但是，Rails將名稱和ID分配給兩個字段 - 所以不知道如何解決這個問題。

Edit4：我找到了解決辦法。我將它添加到所選答案下的評論中。

Answer 1

我認爲它是因爲「名」屬性的表單值（輸入標籤）不匹配JQuery驗證選項

$('#user_new').validate({ 
    debug: true, 
    rules: { 
     user_username: "required", // should be: "user[username]" 
     user_email: { // should be: "user[email]" 
      required: true, 
      email: true 
     } 
    }, 
    messages: { 
     user_username: "Please specify your name", // should be: "user[username]" 
     user_email: { // should be: "user[email]" 
      required: "We need your email address to contact you", 
      email: "Your email address must be in the format of name@domain.com" 
     } 
    } 
}); 

編輯：看看這個問題，我想他有同樣的問題，你是jquery.validate in cakePHP

EDIT2：編輯它顯示，把容器您輸入的標籤之後，讓我們說

<div id="username_error"></div>//for username error message 

添加該代碼的方式：

$('#user_new').validate({ 
    debug: true, 
    rules: { 
     //rules 
    }, 
    messages: { 
     //messages 
    }, 
    errorPlacement: function(error, element) { 
     if (element.is(":radio")) 
      error.appendTo(element.parent().next());//if its a radio button 
     else if (element.is(":checkbox")) 
      error.appendTo (element.next());//if its a radio button 
     else 
      error.appendTo(element.parent().next()); 
    },//these lines of codes basically telling the jquery.validate plug-in to look for an element after 
}); 

，然後申請一些CSS整齊事情

<style> 
#username_error{ 
    //a little something something 
} 
</style> 

，或者您可以隨時檢查documentation進一步修改

Answer 2

不完全確定爲什麼上述不工作我自己。也許別人可以發現它......但同時看看文檔中的調試選項。當你啓用這個選項時你會得到什麼？

Answer 3

試試這個：

$('#user_new').validate({ 
    rules: { 
     user_l_name: "required", 
     user_email: { 
      required: true, 
      email: true 
     } 
    }, 
    messages: { 
     user_l_name: "Please specify your name", 
     user_email: { 
      required: "We need your email address to contact you", 
      email: "Your email address must be in the format of name@domain.com" 
     } 
    } 
}) 

請確保您在規則中使用和按摩的變量都相同，您輸入ID和姓名。我想說的是，你的輸入ID和名稱必須相同才能工作。

我有同樣的問題，如果這不起作用，讓我知道，所以我可以進一步協助。

快樂編碼!!!!

Answer 4

請檢查這個網站http://bassistance.de/jquery-plugins/jquery-plugin-validation。他們有幾個關於JQuery驗證的例子。

希望它有幫助...

快樂編碼！