Jquery 使用Select2 4.0和Bootstrap 3+；

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

我已经将jquery验证器默认设置为bootstrap3类的样式，如下所示

 $.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，但所有这些都使用3.5.xx版本的select2

我包括了图中示例的一部分，我希望对验证器默认值进行调整，使select2看起来统一

我尝试搜索其他SO，但所有这些都使用3.5.xx版本的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交互时没有jqueryvalidate插件自动捕获的任何事件，因此必须编写自定义事件处理程序并以编程方式触发验证

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

---

工作演示：

Sparky的答案对我来说不合适，所以我将其修改为以下内容：

if (element.hasClass('select2-hidden-accessible')) {
    error.insertAfter(element.closest('.has-error').find('.select2'));
} else if (element.parent('.input-group').length) { 
    error.insertAfter(element.parent());
} else {                                      
    error.insertAfter(element);
}

对的一个小修改-我不承担任何责任，除非发现最新的jquery validate（：p）在日期使用了

error

和

valid

类：

/*! jQuery Validation Plugin - v1.16.0 - 12/2/2016
 * http://jqueryvalidation.org/
 * Copyright (c) 2016 Jörn Zaefferer; Licensed MIT */

现在代码：

$('#MyForm').validate({
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) { 
            error.insertAfter(element.parent());      // radio/checkbox?
        } else if (element.hasClass('select2-hidden-accessible')) {     
            error.insertAfter(element.next('span'));  // select2
            element.next('span').addClass('error').removeClass('valid');
        } else {                                      
            error.insertAfter(element);               // default
        }
    }
});

// add valid and remove error classes on select2 element if valid
$('.select2-hidden-accessible').on('change', function() {
    if($(this).valid()) {
        $(this).next('span').removeClass('error').addClass('valid');
    }
});

---

在

error

类上使用CSS，您可以随意使用。

谢谢@KevinBrown，我已经实现了这一点，并且修改了jquery验证默认值，现在对另一个案例或更新的版本非常有效。如果（element.hasClass（“select2 hidden accessible”）{error.insertAfter（element.next），这将有效

if（element.hasClass（“select2 hidden accessible”）{.insertAfter（element.next（'span.select2'）；}

好的，我来看看这个，因为原来的收音机不工作answer@JayRizzi如果您可以为收音机提供一个HTML示例，那么就更容易理解为什么它不适合您。