使用Select2 4.0和Bootstrap 3+设置jQuery验证样式

Question

我有一个使用Bootstrap 3.3.4,Select2 4.0和Jquery Validation 1.13.1的项目

我已经将jquery验证器默认设置为样式引导程序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, errorClass, 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看起来统一

http://jsfiddle.net/z49mb6wr/

Answer 1

我尝试搜索其他SO,但所有这些都使用3.5.xx版本的select2

各种版本都没有秘密配方; 你只需要弄清楚你的情况.这意味着您需要检查呈现的DOM,以便了解要定位的元素以及如何定位它们.

我不认为以下代码适合您; 这只是一个如何攻击这种情况的例子.

1. 编写面向渲染的Select2元素的CSS.因此,只要父容器具有类has-error,Select2元素就会被设置为样式.

   .has-error .select2-selection {
       border: 1px solid #a94442;
       border-radius: 4px;
   }
   

2. 要在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
       }
   }
   

3. 最后,由于与Select2的交互没有jQuery Validate插件自动捕获的任何事件,因此您必须编写自定义事件处理程序并以编程方式触发验证.

   $('.select2').on('change', function() {
       $(this).valid();
   });
   

工作演示:http: //jsfiddle.net/z49mb6wr/1/