使用Select2 4.0和Bootstrap 3+设计jQuery验证样式(Styling jQuery Validation with Select2 4.0 and Bootstrap 3+)

 我有一个使用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字段...，“金属”选择是引导字段，而“颜色”选择是select2字段。 
 
 
 我尝试搜索其他SO，但所有这些都使用select2的3.5.xx版本 
 
 我包含了一个图片示例的jsfiddle，我正在寻找对验证器默认值的调整，以使select2看起来统一 
 
 http://jsfiddle.net/z49mb6wr/ 

I have a project that uses Bootstrap 3.3.4, Select2 4.0, and Jquery Validation 1.13.1
 
I have set the jquery validator defaults to style bootstrap 3 classes like so
 
 $.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);
        }

    }
});
 
But these defaults do not style select2 fields the same... in the image below, the "metals" select is a bootstrap field, while the "colors" select is a select2 field.
 
 
I tried searching other SO's , but all of these use the 3.5.xx version of select2
 
I included a jsfiddle of the example pictured, I am looking for adjustments to the validator defaults to have select2 look uniform
 
http://jsfiddle.net/z49mb6wr/

原文：https://stackoverflow.com/questions/30783019