Bootstrap 3 + Chosen + Jquery Validate Loses Format

I have the code below http://jsfiddle.net/emamut/CBjmj/4/ $.validator.setDefaults({ ignore: ':hidden:not(select)' }); $('form').validate({ highlight: function(element) {

Solution 1:

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

Solution 2:

If what you want is to add the error message bellow the chosen, you always can add it after adding this clause to the errorPlacement:

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

I've forked your fiddle: http://jsfiddle.net/alfupe/0Lwgmmav/