Bootstrap 3 + Chosen + jquery验证丢失格式 [英] Bootstrap 3 + Chosen + jquery validate loses format

问题描述

我的代码低于
http://jsfiddle.net/emamut/CBjmj/ 4 /

$.validator.setDefaults({ ignore: ":hidden:not(select)" });
$('form').validate({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

但是当选择验证时格式化将丢失并返回正常格式的选择

but when select validate the formatting is lost and returns the normal format of Chosen

推荐答案

在 errorPlacement 选项中，当您使用 insertAfter 它在 select 元素和 div.chosen-container 之间插入错误消息。这会污染用于所选小部件的CSS。例如，如果您使用 insertBefore ，则问题就会消失：

In the errorPlacement option, when you use insertAfter it inserts the error message between the select element and the div.chosen-container. This fouls up the CSS used for the chosen widget. For example, if you use insertBefore, the problem goes away:

$.validator.setDefaults({ ignore: ":hidden:not(select)" });
    $('form').validate({
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else if (element.is('select')) {
            error.insertBefore(element);
        } else
        {
            error.insertAfter(element);
        }
    }
});

这篇关于Bootstrap 3 + Chosen + jquery验证丢失格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！