使用selectpicker和jQuery Validation插件放置错误

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

一些技巧:

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/