8

<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>但效果不佳。

4

2 回答 2

11

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

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

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

例如，通过id... 

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

...或通过任何其他有效的 jQuery 选择器<form></form>，该选择器以您想要验证的实际为目标。

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

http://jsfiddle.net/Gy24q/

重要的是，元素option中的第一个或默认值必须包含，否则规则将失败。如果出于某种原因，您无法将 this first 设置为等于，请查看此答案的自定义方法解决方法和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 上调用一次。您不应该将其放在处理程序中。Validate 插件已经有自己的内置事件处理程序，可以捕获表单的提交按钮。submit

根据我上面的工作 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,
    });

});

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

于 2013-02-18T19:03:48.480 回答
-1

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

$(this).validate({
    rules: {
        "id_material[]" : {
            required : true
        }
    }
});
于 2016-06-28T13:12:14.287 回答