jQuery验证动态输入数组 [英] jQuery validate dynamic input array

问题描述

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

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

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

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

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

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

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

And so strangely this plugin does not work:

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

我还尝试在<select>中使用CSS class required，但是效果不好.

I also tried to use a CSS class required in <select>, but no good.

推荐答案

引用OP :很奇怪，此插件无法正常工作:
$(this).validate({ ... });"

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

这并不奇怪.它没有用，因为您还没有真正针对任何目标. $(this)没有上下文或范围具有任何意义.

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.

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

例如，通过id ...

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

...或通过针对实际 >您要验证.

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

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

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

http://jsfiddle.net/Gy24q/

http://jsfiddle.net/Gy24q/

重要，select元素中的第一个或默认option 必须包含value=""，否则required规则将失败.如果由于某种原因，您不能将此第一个option的value设置为等于""，那么请参阅此答案的自定义方法的解决方法和 jsFiddle .

Important, the very first, or the default option in the select element must contain value="" or the required rule will fail. If, for whatever reason, you cannot set this first option's value equal to "", then see this answer's custom method workaround and 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包含方括号，所以[]，您还必须将字段名称用引号引起来:

Since your name contains brackets, [], 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，则有几种选择...

---

The above answer assumes you know the name of the select element. However, if you don't know the name, you have a couple options...

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

1) Use class="required" inside the select element...

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

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

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

2)如果规则更复杂，则可以使用

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

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

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

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

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

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

否则，这将仅将规则应用于具有class id_material的一个 select元素...

Otherwise, this will only apply the rule to only one select element with class id_material...

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

---

在评论中引用OP:

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

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

与:

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

是的，这就是它损坏的原因.

Yes, this is exactly why it's broken.

.validate() 仅一次被称为 在DOM上准备好初始化插件.您不应将其放在submit处理程序中. Validate插件已经具有自己的内置事件处理程序，该事件处理程序可以捕获表单的提交"按钮.

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

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

Setup your code as per my working jsFiddle demos above.

在评论中引用OP:

我正在使用jquery-ui，这将以下内容添加到选择中: style='display: none'.如果我通过Firebug删除display: none， 然后发生选择验证，并正确显示标签错误. 可能会发生什么?

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?

默认情况下，Validate插件会忽略隐藏的元素.您需要通过在validate()中添加ignore: []来关闭该选项:

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

$(document).ready(function () {

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

});

有关更多信息，请参见此答案.

See this answer for more information.

这篇关于jQuery验证动态输入数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！