Bootstrap 3 + Chosen + jqueryvalidation丢失格式

我有以下代码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); } } }); 

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

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

如果您想要的是添加所选的错误消息,您可以在将此子句添加到errorPlacement后添加它:

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

我把你的小提琴分开了: http : //jsfiddle.net/alfupe/0Lwgmmav/