使用 selectpicker 和 jQuery 验证插件放置错误

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>

选择器：

$('select').selectpicker();

要jQuery Validation 需要这个才能看到Select List：

$('#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() 调用中使用 ignore 选项时，您不需要使用 .validate().settings.ignore。

2) 尽管没有造成任何伤害，但 country 中的 name 字段不需要在 .validate() 内用引号引起来。

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

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

5) 由于您的select 元素被selectpicker 元素隐藏，而selectpicker 元素出现在隐藏的select 之后，因此您需要调整 jQuery 以找到在 DOM 中放置错误的正确位置。

由于您的selectpicker 是下一个元素，element.next().after(error) 将在 DOM 树中的 next 元素之后插入错误消息。使用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/