使用selectpicker和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中country并不需要内用引号括起来.validate().

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

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

5)由于你的select元素被隐藏的selectpicker元素和selectpicker元素来后隐藏的select,你需要调整了jQuery找出在DOM为你的错误放置在适当的位置.

由于您selectpicker是下一个元素,因此element.next().after(error)将在DOM树中的下一个元素之后插入错误消息.使用以测试是否输入是元件,以便不与其它输入元件的错误放置造成干扰.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/