jQuery 验证引擎不适用于 Bootstrap Select 插件答案

【问题标题】：jQuery validate Engine Not Work with Bootstrap Select pluginjQuery 验证引擎不适用于 Bootstrap Select 插件
【发布时间】：2014-07-13 23:30:42
【问题描述】：

我使用 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();

在这里演示：http://jsfiddle.net/Sambora/84PVv/2/

在行动中当我们在选择框中选择任何值时，jQuery Validation Engine Not Work 并显示错误框。

如何解决这个问题？

【问题讨论】：

标签： javascript jquery css twitter-bootstrap jquery-validation-engine

【解决方案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         
  });

});

它对我有用。在这里演示：http://www.scriptlodge.com/code_demos/validationEngine/

详情请到我的博客链接http://www.scriptlodge.com/jquery-validationengine-not-work-with-bootstrap-select-plugin/

【讨论】：

你能看看stackoverflow.com/questions/31016810/…

【解决方案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 元素被 validationEngine 脚本“验证”。

添加后，validationEngine 可以与 bootstrap-select 一起使用。

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

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

【讨论】：