Question

我使用jQuery Validate Engine插件和引导程序。此插件工作但是当我使用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/

Answer 2

当bootstrap-select创建克隆元素时，它使用addClass调用将validate[.*]类复制到新的div元素中，而validationEngine尝试验证它。

这可以通过修改setStyle函数去除类属性的那一部分来解决（在bootstrap-select.js的第272行附近）：

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

请注意，更改只是：正则表达式中的|validate\[.*\]。

这使得新的DIV元素不会被验证＆＃34;通过validationEngine脚本。

添加后，validationEngine与bootstrap-select配合使用。

我已提交pull request来解决此问题，已合并到github上的最新版本。

您可以在此处下载更新的脚本： https://raw.githubusercontent.com/silviomoreto/bootstrap-select/master/bootstrap-select.js

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

2 个答案: