jQuery validate Engine Not Work with Bootstrap Select plugin

Question

I work with jQuery Validate Engine Plugin and bootstrap. This Plugin Worked But when I change dropdown selectbox Style using bootstrap-select plugin, validate engine not work.

HTML:

<div class="row-fluid sortable">
    <div class="box span12">
        <div class="box-header well" data-original-title>
             <h2><i class="icon-picture"></i>Change Password</h2>

        </div>
        <div class="box-content">
            <form action="#" id="fm">
                <div class="control-group">
                    <label class="control-label" for="disabledInput">Email</label>
                    <div class="controls">
                        <select name="sport" id="sport" class="validate[required]">
                            <option value="">Choose a sport</option>
                            <option value="option1">Tennis</option>
                            <option value="option2">Football</option>
                            <option value="option3">Golf</option>
                        </select>
                    </div>
                </div>
                <input type="text" name="test" id="test" class="validate[required] text-input" />
                <input type="submit" name="submit" />
            </form>
        </div>
    </div>
    <!--/span-->
</div>
<!--/row-->

JS:

jQuery(document).ready(function () {
    // binds form submission and fields to the validation engine
    jQuery("#fm").validationEngine();
});
$('select').selectpicker();

DEMO HERE : http://jsfiddle.net/Sambora/84PVv/2/

In action When we select any value in selectbox jQuery Validation Engine Not Work and Show error Box.

How do fix this problem?

khasru · Answer 1 · 2014-06-29T02:34:54.020

I got a solution without modifying the core js file. For this we need to use validationEngine "prettySelect","usePrefix" options, and we need to add "id" to cloned element and also need to removed the "validate[required]" class from this element. The full code look likes this.

var prefix = "selectBox_";
jQuery(document).ready(function() {     
  // for remove bootstrap-select validation and adding id to the element with prefix
  $('select').each(function() {
    $(this).next('div.bootstrap-select').attr("id", prefix + this.id).removeClass("validate[required]");
});

  jQuery("#registration").validationEngine('attach',{
        promptPosition: "bottomLeft",
        autoHidePrompt:true,            
        prettySelect : true,
        usePrefix: prefix         
  });

});

It works for me. DEMO HERE : http://www.scriptlodge.com/code_demos/validationEngine/

For detail, Please go to my blog link http://www.scriptlodge.com/jquery-validationengine-not-work-with-bootstrap-select-plugin/

can you please take a look at http://stackoverflow.com/questions/31016810/bootstrap-select-selects-a-wrong-option-each-time — Raas Masood, Jun 24 '15 at 04:46

Larry Williamson · Answer 2 · 2014-06-11T16:14:50.953

When bootstrap-select creates a cloned element, it uses an addClass call 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 (around 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 with bootstrap-select.

I've submitted a pull request to fix this and it has been merged into the latest version on github.

You can download the updated script here: https://raw.githubusercontent.com/silviomoreto/bootstrap-select/master/bootstrap-select.js

jQuery validate Engine Not Work with Bootstrap Select plugin

2 Answers2