At work we build most websites using Bootstrap as the base for the responsive grid, Bootstrap-select to style HTML <select>‘s and jQuery Validate for form validation. Turns out, the three of these don’t necessarily play well together out of the box.

jQuery Validate works in two ways. It starts off lazy by waiting for the user to submit a form, then if any fields are invalid it validates more eagerly, validating each field as the user edits it.

The lazy validation method works fine with Bootstrap-select but if jQuery Validate is validating eagerly, <select>‘s using Bootstrap-select (selectpicker) will no longer validate because the eager validation method validates <select>‘s on the focusout event.

That’s all fine and good, right? Well it would be but unfortunately Bootstrap-select bypasses the focusout event entirely, registering only a change event. on the <select>

In order to get around this, force jQuery Validate to validate each <select> on change.

$('.validate-form select').on('change', function(e) {
    $('.validate-form').validate().element($(this));
});

Change validate-form to be the class name of the form that you’re trying to validate (or add the class validate-form to your validation form) and test!