jquery - 使用 Select2 4.0 和 Bootstrap 3+ 对 jQuery 验证进行样式化

Question

我有一个使用 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, 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”选择是一个引导字段，而“colors”选择是一个 select2 字段。

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

我包含了图中示例的 jsfiddle，我正在寻找对验证器默认值的调整以使 select2 看起来统一

http://jsfiddle.net/z49mb6wr/

Answer 1

I tried searching other SO's, but all of these use the 3.5.xx version of 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/