我有一个使用Bootstrap 3.3.4,Select2 4.0和
Jquery Validation 1.13.1的项目
我已经将jquery验证器默认设置为样式bootstrap 3类,如此
$.validator.setDefaults({
errorElement: "span",errorClass: "help-block",highlight: function (element,errorClass,validClass) {
$(element).addClass(errorClass);
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},unhighlight: function (element,validClass) {
$(element).removeClass(errorClass);
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
},errorPlacement: function(error,element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
但是这些默认值不会将select2字段设置为相同…在下图中,“Metals”选择是一个bootstrap字段,而“colors”select是一个select2字段.
我尝试搜索其他SO,但所有这些都使用3.5.xx版本的select2
我包括了一个示例的jsfiddle,我正在寻找调整验证器的默认值,让select2看起来统一
解决方法
I tried searching other SO’s,but all of these use the 3.5.xx version of select2
各种版本没有秘密配方;你只需要弄清楚你的情况.这意味着您需要检查呈现的DOM,以便了解要定位的元素以及如何定位它们.
我不认为以下代码适合您;这只是一个如何攻击这种情况的例子.
>编写面向渲染的Select2元素的CSS.因此,只要父容器具有类has-error,Select2元素就会被设置为样式.
.has-error .select2-selection {
border: 1px solid #a94442;
border-radius: 4px;
}
>要在Select2元素之后显示错误消息,只需要在errorPlacement选项中使用另一个条件以及一些jQuery DOM遍历.
errorPlacement: function (error,element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent()); // radio/checkBox?
} else if (element.hasClass('select2')) {
error.insertAfter(element.next('span')); // select2
} else {
error.insertAfter(element); // default
}
}
>最后,由于与Select2的交互没有jQuery Validate插件自动捕获的任何事件,因此您必须编写自定义事件处理程序并以编程方式触发验证.
$('.select2').on('change',function() {
$(this).valid();
});