3

我正在使用 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");
        }
})

错误永远不会显示。

我错过了什么？

4

1 回答 1

10

我不确定这一切你哪里出了问题，因为它对我有用。

一些技巧：

.validate().settings.ignore1）当您可以在通话中使用该ignore选项时，您不需要使用。.validate()

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

3)当您已经required在.<select>required.validate()

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

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

由于 yourselectpicker是下一个元素，因此将在 DOM 树中的下一个元素之后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/

于 2013-12-02T22:03:40.003 回答