Last Updated: February 25, 2016
· larrywilliamson

bootstrap-select.js and validationEngine fix

If you're trying to use:

bootstrap-select.js https://github.com/silviomoreto/bootstrap-select
jquery.validationEngine.js https://github.com/posabsolute/jQuery-Validation-Engine

You will most likely run into an issue where the selects will never seem to validate.

There's an easy fix, that took me a bit of fiddling to figure out.

When bootstrap-select creates a cloned element, it uses an addClass that copies the validate[.*] class into the new div element, and validationEngine tries to validate that.

This can be remedied by modifying the setStyle function to strip that part of the class attribute out (at line 272 of bootstrap-select.js):

this.$newElement.addClass(this.$element.attr('class').replace(/selectpicker|mobile-device|validate\[.*\]/gi, ''));

Note the change is simply: |validate\[.*\] in the regular expression.

This keeps the new DIV element from being "validated" by the validationEngine script.

After adding this, validationEngine works for me with bootstrap-select. Huzzah!

I have a pull request here: https://github.com/lawrencealan/bootstrap-select/commit/66a73ceb3a1c155bdeff127fb2330e51f73e1abf

Say Thanks