2016-06-08 97 views
0

我的頁面中有多個表單,它們具有相同的值。如何將多個表單驗證綁定到Jquery驗證器

我寫了一個通用的方法,可以將規則和消息作爲參數傳遞,而不是編寫多個規則和消息。

但是,這隻適用於頁面具有不同的表單值。如果一個頁面有多個具有相似值的表單,那麼我們就無法綁定它,因爲我不想編寫多個規則和消息。因爲這兩個表單必須顯示相同的錯誤消息,如果驗證失敗。

所以在下面的代碼中,規則和消息都是相同的,我如何使用一組規則和消息來相應地顯示兩個表單。

這就是我試過的。

HTML:

<form id="form1"> 
    <label for="firstName1">First Name </label> 
    <input id="firstName1" name="firstName1" required/> 
    <label for="lastName1">Last Name </label> 
    <input id="lastName1" name="lastName1" required/> 
</form> 

<form id="form2"> 
    <label for="firstName2">First Name </label> 
    <input id="firstName2" name="firstName2" required/> 
    <label for="lastName2">Last Name </label> 
    <input id="lastName2" name="lastName2" required/> 
</form> 

JS:

驗證的常見方法:

window.validation = { 
    validateForm : function(that, fId, rules, messages, handlerFnc){ 
    var _self = this, _this = that; 
    return { 
     rules : rules, 
     messages : messages, 
     submitHandler: function(fId, evt) { 
     var serForm = $(fId).serialize(); 
     (handlerFnc) ? handlerFnc(fId, _this, evt) : null; 
     } 
    } 
    } 
} 

呼喚在我看來,這個方法:

var rules = {}; var messages = {}; 
      rules.firstName1 = { 
      required: "FN Req Field" 
      }; 
      messages.lastName1 = { 
      required: "LN required field" 
      }; 
      rules.firstName2 = { 
      required: "FN Req Field" 
      }; 
      messages.lastName2 = { 
      required: "LN required field" 
      }; 
      $('#form1').validate(validation.validateForm(_self, "form1", rules, messages, _self.handlerFn2)); 
      $('#form2').validate(validation.validateForm(_self, "form2", rules, messages, _self.handlerFn2)); 
+0

你有什麼問題? – Barmar

+0

@Barmar:我想集中規則和消息,因爲兩個表單都具有相同的值。是否有辦法爲這兩個表單保留一組規則和消息。而不是重複它們。 –

+0

是不是你用你的'rules'和'messages'變量做了什麼?重複在哪裏? – Barmar

回答

0

理想情況下,你將能夠使用$("#form1, #form2").validate(...),但jquery-validate實現僅對它所調用的第一個元素進行操作。所以你可以使用.each()

$("#form1, #form2").each(function() { 
    $(this).validate(validation.validateForm(_self, "form1", rules, messages, _self.handlerFn2)); 
});