Bootstrap选择插件不适用于jQuery验证

Question

我HTML使用bootstrap select插件设计我的选择框.现在,我为我的表单添加jQueryvalidation插件validate但是,验证表单不能与bootstrap select插件一起使用.

在这里演示

HTML:

<form id="myform">
    <select name="year" class="selectpicker">
        <option value="">Year</option>
        <option value="1">1955</option>
        <option value="2">1956</option>
    </select>
    <br/>
    <input type="submit" />
</form>

JS:

$(document).ready(function () {
$('select').selectpicker();
    $('#myform').validate({ // initialize the plugin
        rules: {
            year: {
                required: true,
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});

注意: For check this conflict, remove Line 2 from JS, jQuery Validation Worked.

编辑: adeneo修复问题使用ignore[]方法:FIDDLE

$('#myform').validate({ // initialize the plugin
    ignore: [],
    rules: {
        year: {
            required: true
        }
    },
    errorPlacement: function(error, element) {
        if (element.attr("name") == "year") {
          error.insertAfter(".bootstrap-select");
        } else {
          error.insertAfter(element);
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

现在这工作但我有新问题:在正常验证后选择字段,错误消息This field is required自动隐藏(或添加任何CSS,显示成功消息)但现在,错误消息显示在修复必填字段后.在行为中:当我们选择年份时,错误信息不会隐藏.

怎么解决这个？

Answer 1

select插件隐藏原始选择并创建一个新的,其中包含一个无序列表,用于更新隐藏的选择值,但默认情况下验证插件未验证隐藏的元素,您必须使用ignore规则并启用隐藏元素的验证

$('#myform').data("validator").settings.ignore = "";

小提琴

要么

$('#myform').validate({ // initialize the plugin
    ignore: [],
    rules: {
        year: {
            required: true
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

小提琴

Bootstrap选择插件从无序列表创建一个新的下拉列表,原始选择被隐藏,当用户与无序列表交互时,它的值会更新.

这也有移动错误消息的不利因素,因为原始的,现在隐藏的选择是被验证的元素,并且由无序列表组成的新的可见下拉列表由Bootstrap插入到DOM中的原始选择下方,错误消息在原始选择之后插入,但在无序列表之前插入,因此它显示在自定义下拉列表上方,而不是像使用原始选择时那样.

要修复它,您可以轻松地移动任何给定元素的错误消息

$('#myform').validate({ // initialize the plugin
    ignore: [],
    rules: {
        year: {
            required: true
        }
    },
    errorPlacement: function(error, element) {
        if (element.attr("name") == "year") {
          error.insertAfter(".bootstrap-select");
        } else {
          error.insertAfter(element);
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

小提琴