3

查看此处的文档: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[]'不适用于验证插件。请参阅下面的答案和评论。)

但是当我尝试添加其他文件类型时没有验证错误......有什么建议吗?

4

3 回答 3

2

您可以应用于.rules("add", rules)每个生成的元素:

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

jQuery.validate确实提供了一种通过表单上设置的规则(至少到 v1.11)来验证具有相同名称(foo[]nor )的元素的方法。foo[N]

还有其他一些添加动态规则的方法,例如,在不调用的情况下添加所需的检查,.rules('add')您可以简单地class="required"在元素中使用,并且验证插件应该动态地选择它。

但是,没有与该选项等效的内置extension选项,因此您必须为所有输入添加一个类并使用addClassRules. 这最终将一些行为与 HTML 和可能的 CSS 混合在一起。


给未来读者的注意事项.rules('add'):两者addClassRules都不适用于重复的名称(例如foo[]),但如果名称不完全相同(例如foo[index])(例如 OP 的情况),它们确实有效。

我相信具有完全相同名称的输入对于这个问题来说是题外话,但是对于这些你要么必须添加自己的验证方法addMethod,要么在表单的提交处理程序中添加自己的验证,或者尝试这个相关的答案

于 2013-03-12T14:08:20.787 回答
1

我认为给出的答案是正确的,但也值得考虑创建一个结合你的两个规则的类规则,然后给你输入这个类。这样您就不必在每次向 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">
于 2013-03-12T14:37:00.747 回答
1

编辑:我的答案发布在问题的原始版本上,在没有阅读评论的情况下,不知道这些字段是动态创建的。否则,最好在创建每个字段时简单地添加规则:

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
});

(嵌套括号按此答案处理。)

原答案如下:


接受的答案让你成功了一半。

此外,我的回答不需要class对现有 HTML 结构进行额外或任何其他更改。这都是 jQuery...

前半部分是使用内置rules('add')方法

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

后半部分是将该方法应用于所有具有命名"field[19]"、、"field[20]"等的元素"field[21]"

您只需将jQuery.each()jQuery "starts with" 选择器一起使用

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

演示:http: //jsfiddle.net/cWABL/

于 2013-03-12T15:22:09.037 回答