jQuery 验证动态输入数组

Question

如何验证<select>当这是动态数组时？像这样:

<select class="escolhaVidro id_material" name="id_material[]" id="id_material">

澄清一下:这个<select>由PHP动态组装，所以我不知道索引是什么，所以这种方式是不可能的:

$(this).validate({
    rules: {
        "id_material[index]" : {
            required : true
        }
    }
});

奇怪的是这个插件不起作用:

$(this).validate({
    rules: {
        id_material : {
            required : true
        }
    }
});

我还尝试使用 CSS class required在<select> ，但不好。

Answer 1

Quote OP: "And so strangely this plugin does not work:
$(this).validate({ ... });"

这并不奇怪。它不起作用，因为你还没有真正瞄准任何目标。 $(this) 没有上下文或范围具有任何意义。

您必须正确定位您的<form>元素:

例如，通过id ...

$('#myform').validate({ ... });

...或通过any other valid jQuery selector目标是实际的 <form></form>您想要验证。

<小时/>

以下是如何验证 select 的通用示例您可以轻松适应您的情况的元素:

<强> http://jsfiddle.net/Gy24q/

重要，第一个，或者默认 option在 select元素必须包含value=""或required规则将会失败。如果出于某种原因，您无法首先设置此option的value等于 "" ，然后 see this answer's自定义方法解决方法和 jsFiddle .

HTML:

<form id="myform">
    <select name="id_material[]">
        <option value="">please choose...</option>
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
    </select>
    ....
</form>

自从您的 name包含括号，[] , you also must enclose your field name in quotes :

jQuery:

$(document).ready(function () {

    $('#myform').validate({ // initialize plugin within DOM ready
        // other options,
        rules: {
            'id_material[]': {
                required: true
            }
        },
    });

});

<小时/>

以上答案假设您知道 name select的元素。但是，如果您不知道name ，你有几个选择...

1) 使用class="required"里面select元素...

<select class="escolhaVidro id_material required" name="id_material[]" id="id_material">

演示:http://jsfiddle.net/Gy24q/4/

2) 如果规则比较复杂，可以添加复合 rules基于您现有的class使用 the rules('add') method 进行分配.

使用 jQuery .each()如果您有多个select需要此规则的元素...

// must be called after validate()
$('select.id_material').each(function () {
    $(this).rules('add', {
        required: true
    });
});

演示:http://jsfiddle.net/Gy24q/10/

否则，这只会​​将规则应用于仅一个select元素为 class id_material ...

$('select.id_material').rules('add', {
    required: true
});

<小时/>

编辑:

在评论中引用OP:

Inside the function following validation is performed: $('#formOrcamento').live('submit', function() {...}); Then $(this).validate({...}); refers to: $('#formOrcamento').validate
({...});

与:

相同

$('#formOrcamento').live('submit', function() {
    $(this).validate({ ... });
});

是的，这正是它损坏的原因。

.validate() 仅在 DOM 上调用一次以准备初始化插件。你不应该把它放在 submit 中处理程序。验证插件已经有自己的内置事件处理程序，可以捕获表单的提交按钮。

按照上面我的工作 jsFiddle 演示设置您的代码。

<小时/>

编辑2:

在评论中引用OP:

I'm using jquery-ui and this adds to the select the following: style='display: none'. If I remove via Firebug the display: none, then select validation occurs and displays the label error correctly. What might be happening?

验证插件默认忽略隐藏元素。您需要通过添加 ignore: [] 来关闭该选项。至validate() :

$(document).ready(function () {

    $('#myform').validate({
        ignore: [], // to allow validation of hidden elements
        // other options,
    });

});

参见this answer了解更多信息。