Bootstrap 3 + Chosen + jquery validate 丢失格式答案

【问题标题】：Bootstrap 3 + Chosen + jquery validate loses formatBootstrap 3 + Chosen + jquery validate 丢失格式
【发布时间】：2014-07-18 19:16:00
【问题描述】：

我有下面的代码 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

【问题讨论】：

标签： javascript jquery twitter-bootstrap-3 jquery-validate jquery-chosen

【解决方案1】：

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

$.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);
        }
    }
});

【讨论】：

【解决方案2】：

如果您想要在所选内容的下方添加错误消息，您可以在将这个子句添加到errorPlacement之后添加它：

else if (element.is('select')) {
   error.insertAfter(element.siblings(".chosen-container"));
}

我已经分叉了你的小提琴：http://jsfiddle.net/alfupe/0Lwgmmav/

【讨论】：