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

引用OP:"奇怪的是这个插件不起作用:
$(this).validate({ ... });"

这并不奇怪.它没有用,因为你没有真正针对任何事情.没有$(this)任何意义的背景或范围.

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

例如,id...

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

...或任何其他有效的jQuery选择器,以<form></form>您要验证的实际为目标.

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

http://jsfiddle.net/Gy24q/

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

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包含支架,[],你也必须用引号的字段名称:

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分配添加复合.rules('add')

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

// 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:

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

与...一样:

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

是的,这正是它被打破的原因.

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

根据我上面的工作jsFiddle演示设置你的代码.

编辑2:

在评论中引用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,
    });

});

有关更多信息,请参阅此答案.