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

我也尝试在 <select> 中使用 CSS class required，但没有用。

Answer 1

引用 OP：“奇怪的是，这个插件不起作用：
$(this).validate({ ... });”

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

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

例如，id...

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

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

---

以下是一个通用示例，说明如何验证您可以轻松适应您的情况的 select 元素：

http://jsfiddle.net/Gy24q/

重要，select 元素中的第一个或默认option 必须 包含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
            }
        },
    });

});

---

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

1) 在select 元素内使用class="required"...

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

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

2) 如果规则更复杂，您可以使用the rules('add') method 在现有class 分配的基础上添加复合rules。

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

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

---

编辑：

在 cmets 中引用 OP：

在函数内部执行以下验证： $('#formOrcamento').live('submit', function() {...}); 然后 $(this).validate({...});指的是：$('#formOrcamento').validate ({...});

同：

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

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

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

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

---

编辑 2：

在 cmets 中引用 OP：

我正在使用jquery-ui，这增加了以下选择： style='display: none'。如果我通过 Firebug 删除 display: none， 然后选择验证发生并正确显示标签错误。 可能会发生什么？

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

$(document).ready(function () {

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

});

更多信息请参见this answer。

Answer 2

只需使用 emtpy 括号并确保包含括号的名称包含在引号中（请参阅documentation）：

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