使用selectpicker＆amp;放置错误jQuery Validation插件

Question

我正在使用Bootstrap，selectpicker和jQuery Validation插件。

选择列表：

<div class="form-group" id="content">
<select id="country" name="country" required>
<option value=''>Select</option>
<option value='1'>USA</option>
</select>
</div>

Selectpicker：

$('select').selectpicker();

要进行jQuery验证，需要这样才能看到选择列表：

$('#frm-name').validate().settings.ignore = ':not(select:hidden, input:visible, textarea:visible)';

然后验证：

$("#frm-name").validate({
        rules: {
            "country": {
                  required: true
            }

        },
        errorPlacement: function(error, element) {
            error.insertAfter("#content");
        }
})

错误永远不会显示。

我错过了什么？

Answer 1

我不确定你在哪里出错，因为它对我有用。

一些提示：

1）当您在.validate().settings.ignore电话中使用ignore选项时，无需使用.validate()。

2）虽然没有造成任何损害，但name的{​​{1}}字段country不需要用.validate()中的引号括起来。

3）当您已在required内声明<select>规则时，required元素中不需要.validate()属性。

4）使用errorPlacement回调函数时，请利用error和element参数，因为相同的函数通常用于所有表单元素。通过指定特定元素的id，您将强制所有输入元素的所有错误消息进入相同的位置。

5）由于select元素隐藏了selectpicker元素，而隐藏selectpicker之后{em} 隐藏了select元素，因此我需要调整你的jQuery，找到你在错误放置中的适当位置。

由于您的selectpicker是下一个元素，element.next().after(error)将在 元素中插入错误消息。使用if ($(element).is('select'))来测试输入是否为select元素，以免干扰其他输入元素的错误放置。

errorPlacement: function (error, element) {
    if ($(element).is('select')) {
        element.next().after(error); // special placement for select elements
    } else {
        error.insertAfter(element);  // default placement for everything else
    }
}

完整代码：

$(document).ready(function () {

    $('#country').selectpicker();

    $("#frm-name").validate({
        ignore: ':not(select:hidden, input:visible, textarea:visible)',
        rules: {
            country: {
                required: true
            }
        },
        errorPlacement: function (error, element) {
            if ($(element).is('select')) {
                element.next().after(error); // special placement for select elements
            } else {
                error.insertAfter(element);  // default placement for everything else
            }
        }
    })

});

工作演示：http://jsfiddle.net/Bccq7/