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/

score 0 · Answer 1 · answered Jul 25 '14 at 22:40

0

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/

answered Jul 25 '14 at 22:40

William Lahti

1,150
11
11

Running your fiddle still doesn't put the red shadowy border around the dropdown field on the form on my end. – MattD Jul 28 '14 at 13:11
What browser are you on? On Chrome, if I click Submit without filling anything, both fields turn red. If I then fix the favorite color, it immediately turns green. If I start again and set the color and submit, it is green right away. Could you describe what behavior isn't correct? – William Lahti Jul 28 '14 at 18:41
I'd say that describes the correct behavior, but I'm on Firefox 30, and your fiddle doesn't appear to work for me. Can't test it in Chrome until I get home. I can also confirm it doesn't work in IE9. – MattD Jul 28 '14 at 18:52

jQuery validation select2

1 Answers1