jQuery驗證 - 兩個單獨的驗證，一種形式

Question

我想創建一個簡單的應用程序與兩個按鈕窗體（保存並提交）。我正在使用jQuery驗證插件。爲了提交表格，申請人必須正確填寫整個表格。沒有空盒子和每個盒子中的有效數據。然而，爲了節省，他們可以留下儘可能多的字段，但他們填寫的字段必須是有效的。 （即數字框中沒有字母）。

爲此，我有兩個單獨的驗證函數，並根據用戶點擊哪個按鈕調用其中一個。這對提交按鈕正常工作，並且它首次用於保存按鈕。然而，如果用戶輸入一些亂碼進入一個用於數字的盒子並點擊保存TWICE，表格將會提交。他們第一次達到保存時，表現正確。

對於我的生活，我無法弄清楚爲什麼。我的jQuery代碼如下：

$(document).ready(function(){ 

     $("#csa_submit_button").live("click",function(){ 
      //alert("submit"); 
      $("#csa_submit_flag").val("true"); 
      validator = $("#csa_form").validate({ 
       "rules": { 
        "csa_phone" : {required: true, digits: true, minlength: 10, maxlength: 10}, 
        "csa_current_grants" : {number: true, required: true}, 
        "csa_current_work_study" : {number: true, required: true}, 
        "csa_balance_no_loans" : {number: true, required: true}, 
        "csa_current_loans" : {number: true, required: true}, 
        "csa_textbooks" : {number: true, required: true}, 
        "csa_total_to_date" : {number: true, required: true}, 
        "csa_parent_plus" : "required", 
        "csa_student_loans" : "required", 
        "csa_balance" : {number: true, required: true}, 
        "csa_employment_contributions" : {number: true, required: true}, 
        "csa_current_financial_situation" : "required", 
        "csa_activities" : "required", 
        "csa_request_amount" : {required: true, number: true}, 
        "csa_term": {required: true, minlength: 1} 
       }, 
       "messages": { 
        "csa_term": "You must select at least one term", 
        "csa_phone": "You must enter a phone number in the following format: ##########" 
       }, 
       errorPlacement: function(error, element) { 
        if (element.attr('type') === 'radio') { 
         error.insertAfter(element.parent()); 
        } 
        else if (element.attr('name') === 'csa_employment_contributions'){ 
         error.insertAfter(element.parent()); 
        } 
        else if (element.attr('name') === 'csa_term') { 
         error.insertAfter(element.parent()); 
        } 
        else { 
         error.insertAfter(element); 
        } 
       } 
      }); 
     }); 
     $("#csa_save_button").live("click",function(){ 

      $("#csa_submit_flag").val("false"); 

      validator = $("#csa_form").validate({ 
       "rules": { 
        "csa_phone" : {number: true}, 
        "csa_current_grants" : {number: true}, 
        "csa_current_work_study" : {number: true}, 
        "csa_balance_no_loans" : {number: true}, 
        "csa_current_loans" : {number: true}, 
        "csa_textbooks" : {number: true}, 
        "csa_total_to_date" : {number: true}, 
        "csa_balance" : {number: true}, 
        "csa_employment_contributions" : {number: true}, 
        "csa_request_amount" : {number: true} 
       }, 
       "messages": { 
        "csa_phone": "You must enter a phone number in the following format: ##########" 
       }, 
       errorPlacement: function(error, element) { 
        if (element.attr('name') === 'csa_employment_contributions'){ 
         error.insertAfter(element.parent()); 
        } else { 
         error.insertAfter(element); 
        }     
       } 
      }); 


     }); 

     }); 

Answer 1

你有什麼.validate()正在做一個根本性的誤解。它是而不是一種按需檢查有效性的方法。一旦插件被正確初始化，這將自動完成。

.validate()只是初始化插件及其在窗體上的選項。這就是爲什麼你在第一次點擊時看到它工作一次。通過設計，再次調用它，即使使用不同的選項，也不會做任何事情...這就是爲什麼它在隨後的其他按鈕點擊中被打破的原因。

您不能在同一表單上同時擁有兩個獨立的插件實例。你別無選擇，只能重新設計你的代碼。

請參閱該文檔：http://docs.jquery.com/Plugins/Validation

---

編輯：

沒有可按需啓用驗證/關閉方法。由於該插件旨在處理click並攔截事件，因此可以從表單中刪除另一個按鈕（以避免提交）並分別處理數據，並使用ajax將數據發送到服務器。

$('#save').click(function() { 
    var data = $('#myform').serialize(); 
    // ajax code to send the serialized data to the server 
}); 

簡單的演示：http://jsfiddle.net/x4N4U/

Answer 2

我想完成斯帕克的答案用一個鏈接到另一個自己的答案：https://stackoverflow.com/a/24456384/923712。

簡而言之，有一種方法可以在.validate()調用後使用.rules('add', ...)和.rules('remove')方法更新驗證。

此處瞭解詳情：http://jqueryvalidation.org/rules

Answer 3

如果你想用不同的按鈕調用新的設置再打電話確認

e.g $('#formid').removeData('validator'); 

這將刪除驗證的連接，然後將其初始化再次與新的設置形式