jQuery验证引擎不能使用Bootstrap Select插件

Question

我使用jQuery Validate Engine Plugin和bootstrap.这个插件工作但是当我使用bootstrap-select插件更改下拉选择框样式时,验证引擎无法正常工作.

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/

在行动当我们选择selectbox jQuery Validation Engine Not Work和Show error Box中的任何值时.

怎么解决这个问题？

Answer 1

我没有修改核心js文件就得到了解决方案.为此,我们需要使用validationEngine"prettySelect","usePrefix"选项,我们需要将"id"添加到克隆元素,还需要从此元素中删除"validate [required]"类.完整的代码看起来像这样.

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         
  });

});

这个对我有用.DEMO HERE:http://www.scriptlodge.com/code_demos/validationEngine/

有关详细信息,请访问我的博客链接http://www.scriptlodge.com/jquery-validationengine-not-work-with-bootstrap-select-plugin/