Bootstrap-select: Bootstrap-Select and Jquery Validation option check

Created on 5 Dec 2015 · 3Comments · Source: snapappointments/bootstrap-select

I am using Bootstrap with Bootstrap-Select and Jquery Validation. I am facing the following issue:

In the select with Bootstrap-Select, when there is no selected option and I click in Filter, the selectbox changes to red (desired behavior), and after if I select any option it should go to the default state (blue).
In the selectbox without the Bootstrap-Select it works.

https://jsfiddle.net/0q5qz3hp/

http://stackoverflow.com/questions/34089048/bootstrap-select-and-jquery-validation-option-check

Any help on this?

Source

Khrysller

Most helpful comment

First, use the newest version of bootstrap-select (you're using v1.6.5 in your example). Also, for some reason, jQuery Validation uses blur instead of the change event to trigger unhighlight.

This snippet should work:

$('.selectpicker').on('change', function () {
    var $el = $(':focus');
    $(this).blur();
    $el.focus();
});

Edit:

Looking at the documentation, this is probably a better alternative:

$('.selectpicker').on('change', function () {
    $(this).valid();
});

caseyjhol on 9 Dec 2015

👍10

All 3 comments

First, use the newest version of bootstrap-select (you're using v1.6.5 in your example). Also, for some reason, jQuery Validation uses blur instead of the change event to trigger unhighlight.

This snippet should work:

$('.selectpicker').on('change', function () {
    var $el = $(':focus');
    $(this).blur();
    $el.focus();
});

Edit:

Looking at the documentation, this is probably a better alternative:

$('.selectpicker').on('change', function () {
    $(this).valid();
});

caseyjhol on 9 Dec 2015

👍10

Here is simple solution which worked for me:

    var validator = $('#myForm').validate({
        .
        .
        .
    });

    $('select.select-field').on('change', function () {
        validator.element($(this));
    });

That's it