jQuery validation select2

Question

I validate my form with jQuery validation plugin. I change style dropdown menu with jQuery select2 plugin. if validate callback error my input show/add class error box(red border) else show/add class success box(green border). This worked in normal input but wont work in select2. when I choose any value for select box error box(red border) not hide/switch to success box. select2 worked after click submit button.

JS:

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa icon-plane icon-2x form-control-feedback"></i>')
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa icon-plane icon-2x  form-control-feedback"></i>');
        }
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});
$("#lstColors").select2({
    placeholder: "Select a Color",
    width: "200px"
});

how do fix this problem ?!

DEMO : http://jsfiddle.net/hTPY7/1413/

Answer 1

jquery.validate is not noticing that select2 changes. While I am not sure why this is the case, you can work around this by noting when the form has been submitted (perhaps by applying the class 'submitted' to any form which was submitted by the user):

$('form').submit(function() { 
    $(this).addClass('submitted');
});

Then calling $().valid() when select2 changes, causing jquery.validate to revalidate the form:

$('#lstColors').change(function() {
    if ($('form').hasClass('submitted'))
        $('form').valid();
});

Here is a jsFiddle fork which has it working: http://jsfiddle.net/Tdafh/1/

Answer 2

I have answered this on a different StackOverflow question. You have to take some extra steps to dig through the layered markup of a dropdown modified by select2. All the details and a demo can be seen there.