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

发布时间：2020-12-18 00:20:21 所属栏目：安全来源：网络整理

导读：我有一个使用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,v

我有一个使用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看起来统一

http://jsfiddle.net/z49mb6wr/

解决方法

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();
});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!