jQuery 验证动态输入数组

jQuery validate dynamic input array

提问by Maykonn

How to validate a <select>when this is a dynamic array? Like this:

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

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

To clarify: This <select>assembled dynamically by PHP, so I do not know what are the indexes, so this way is not possible:

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

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

And so strangely this plugin does not work:

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

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

I also tried to use a CSS classrequiredin <select>, but no good.

我还试图用一个CSSclassrequired中<select>，但没有好。

回答by Sparky

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

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

It's not strange. It's not working because you have not really targeted anything. There's no context or scope for $(this)to have any meaning.

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

You must properly target your <form>element:

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

for example, by id...

例如，通过id...

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

...or by any other valid jQuery selectorthat targets the actual <form></form>you want validated.

...或任何其他有效的 jQuery 选择器针对<form></form>您想要验证的实际情况。

---

---

Here is a generic example of how to validate a selectelement that you can easily adapt into your situation:

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

http://jsfiddle.net/Gy24q/

http://jsfiddle.net/Gy24q/

Important, the very first, or the default optionin the selectelement mustcontain value=""or the requiredrule will fail. If, for whatever reason, you cannot set this first option's valueequal to "", then see this answer'scustom method workaround and jsFiddle.

重要，元素option中的第一个或默认值必须包含，否则规则将失败。如果出于某种原因，你可以不设置这个第一的等于，然后看到这个答案的自定义方法解决方法和的jsfiddle。selectvalue=""requiredoptionvalue""

HTML:

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>

Since your namecontains brackets, [], you also must enclose your field name in quotes:

由于您name包含方括号, []，您还必须将您的字段名称括在引号中：

jQuery:

jQuery：

$(document).ready(function () {

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

});

---

---

The above answer assumes you know the nameof the selectelement. However, if you don't know the name, you have a couple options...

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

1)Use class="required"inside the selectelement...

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

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

Demo: http://jsfiddle.net/Gy24q/4/

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

2)If the rules are more complex, you can add compound rulesbased on your existing classassignments using the rules('add')method.

2）如果规则比较复杂，你可以添加复合rules根据您现有的class使用分配的rules('add')方法。

Use jQuery .each()if you have more than one selectelement that needs this rule...

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

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

Demo: http://jsfiddle.net/Gy24q/10/

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

Otherwise, this will only apply the rule to only oneselectelement with classid_material...

否则，这只会​​将规则应用于仅select具有classid_material...

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

---

---

EDIT:

编辑：

Quote OP in comments:

在评论中引用 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({...});指：$('#formOrcamento').validate ({...});

same as:

与...一样：

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

Yes, this is exactly why it's broken.

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

.validate()only gets called onceon DOM ready to initializethe plugin. You are not supposed to put it inside a submithandler. The Validate plugin already has its own built-in event handler that captures the form's submit button.

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

Setup your code as per my working jsFiddle demos above.

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

---

---

EDIT 2:

编辑2：

Quote OP in comments:

在评论中引用 OP：

I'm using jquery-uiand 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?

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

The Validate plugin ignores hidden elements by default. You'll need to turn that option off by adding ignore: []to validate():

默认情况下，Validate 插件会忽略隐藏元素。你需要通过添加把这一选项关闭ignore: []到validate()：

$(document).ready(function () {

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

});

See this answerfor more information.

有关更多信息，请参阅此答案。

回答by Adam

Just use emtpy brackets and make sure the name including brackets is in quotation marks (see documentation):

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

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