jQuery驗證與未知的數組鍵

Question

望着文檔在這裏：http://docs.jquery.com/Plugins/Validation/Reference#Fields_with_complex_names_.28brackets.2C_dots.29 用於連接規則來輸入數組的語法是這樣的：

rules: { 
"user[email]": "email", 

但是在我的情況下，數組鍵是數值，並可能有任何價值，但我仍然希望將規則附加到領域。我動態添加輸入字段使用jQuery（key是一個全局變量）：

$('a#addfield').click(function(e) 
{ 
    e.preventDefault(); 
    var data = '<p><input type="file" name="field['+key+']"></p>'; 
    $('div#inputcontainer').append(data); 
}); 

樣本HTML輸出：

<p><input name="field[19]" type="file"></p> 
<p><input name="field[22]" type="file"></p> 
<p><input name="field[25]" type="file"></p> 

我試圖定義這樣的規則：

rules: 
{ 
    'field[]': { 
     required: true, 
     extension: "pdf|doc|docx" 
    } 
} 

（從這個答案採取：jquery validate add rules for an array input編輯：這種建議的方式設置規則'field[]'不適用於驗證插件。請參閱下面的答案和評論。 ）

但是當我嘗試添加其他文件類型時沒有驗證錯誤...有什麼建議嗎？

Answer 1

可以應用.rules("add", rules)到每個所生成的元素：

$(element).rules("add", { required:true, extension: "pdf|docx?" }); 

---

jQuery.validate確實提供了一種方法來驗證通過表單上設置的規則具有相同名稱（foo[]也不foo[N]）元件（至少截至v1.11）。

添加動態規則還有其他一些方法，例如添加所需的支票而不調用.rules('add')，您可以在元素中簡單地使用class="required"，並且驗證插件應該動態地選取它。

但是，沒有與extension選項的內置等價物，所以您必須爲所有輸入添加一個類並使用addClassRules創建您自己的類規則。這最終混合了一些行爲與HTML和可能的CSS雖然。

---

注意爲未來的讀者：既.rules('add')和addClassRules不重複名稱的工作（例如foo[]），但如果名稱不完全相同（例如foo[index]）這些做的工作是OP的情況。

我相信，隨着完全相同的名稱輸入是這個問題的題外話，但對於這些，你要麼必須與addMethod添加自己的驗證方法，或添加表單的提交處理程序內自己的驗證或嘗試這個related answer。

Answer 2

我認爲給出的答案是正確的，但它也值得考慮創建一個結合你的兩條規則的類規則，然後給你的輸入這個類。這樣，您不必在每次向DOM動態添加新元素時調用addMethod。

$.validator.addClassRules("myinput", { required:true, extension: "pdf|docx?" }); 

HTML

<input name="field[19]" type="file" class="myinput"> 
<input name="field[22]" type="file" class="myinput"> 
<input name="field[25]" type="file" class="myinput"> 

Answer 3

編輯：我的答案被張貼在的問題，在沒有閱讀的意見，這是未知的原始版本，這些領域是創建動態。否則，它可以優選地只需添加規則創建的每個字段：

var myRule = { // save some code... put the common rule into a variable 
    required:true, 
    extension: "pdf|docx?" 
}; 

$('a#addfield').click(function(e) { 
    e.preventDefault(); 
    var data = '<p><input type="file" name="field['+key+']"></p>'; 
    $('div#inputcontainer').append(data); 
    $('[name="field['+key+']"]').rules("add", myRule); // add the rule to the new field 
}); 

（嵌套括號處理as per this answer。）

原來的答案如下：

---

接受的答案變你一半在那裏。

此外，我的答案不需要額外的class或對現有HTML結構的任何其他更改。這是所有的jQuery ...

上半部分是使用the built-in rules('add') method。

$(element).rules("add", { 
    required:true, 
    extension: "pdf|docx?" 
}); 

下半年是讓應用於所有元素與名爲"field[19]"，"field[20]"，"field[21]"等

您只需使用一個jQuery .each()一個jQuery "starts with" selector該方法。

$('[name^="field"]').each(function() { 
    $(this).rules("add", { 
     required:true, 
     extension: "pdf|docx?" 
    }); 
}); 

DEMO：http://jsfiddle.net/cWABL/