Bootstrap 选择插件不适用于 jQuery 验证答案

【问题标题】：Bootstrap select Plugin Not work With jQuery ValidationBootstrap 选择插件不适用于 jQuery 验证
【发布时间】：2014-01-09 11:29:50
【问题描述】：

我使用bootstrap select plugin 设计我的HTML 选择框。现在，我为validate 我的表单添加了jQueryvalidation 插件但是，验证表单不适用于引导选择插件。

演示HERE

HTML：

<form id="myform">
    <select name="year" class="selectpicker">
        <option value="">Year</option>
        <option value="1">1955</option>
        <option value="2">1956</option>
    </select>
    <br/>
    <input type="submit" />
</form>

JS：

$(document).ready(function () {
$('select').selectpicker();
    $('#myform').validate({ // initialize the plugin
        rules: {
            year: {
                required: true,
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});

注意： For check this conflict, remove Line 2 from JS, jQuery Validation Worked.

编辑： adeneo 使用ignore[] 方法修复问题：FIDDLE

$('#myform').validate({ // initialize the plugin
    ignore: [],
    rules: {
        year: {
            required: true
        }
    },
    errorPlacement: function(error, element) {
        if (element.attr("name") == "year") {
          error.insertAfter(".bootstrap-select");
        } else {
          error.insertAfter(element);
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

现在这有效，但我有新问题：在选择字段后的正常验证中，错误消息 This field is required 自动隐藏（或添加任何 css，显示成功消息）但现在，在修复必填字段后显示错误消息。实际操作：当我们选择年份时，错误信息不会隐藏。

如何解决这个问题？

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/17893433/…

标签： javascript jquery twitter-bootstrap

【解决方案1】：

select 插件隐藏了原来的 select 并创建了一个新的带有更新隐藏 selects 值的无序列表，但是默认情况下验证插件不会验证隐藏元素，您必须使用忽略规则并打开验证隐藏元素

$('#myform').data("validator").settings.ignore = "";

FIDDLE

或

$('#myform').validate({ // initialize the plugin
    ignore: [],
    rules: {
        year: {
            required: true
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

FIDDLE

Bootstrap 选择插件从无序列表中创建一个新的下拉列表，并且原始选择被隐藏并且当用户与无序列表交互时它的值被更新。

这也有移动错误消息的缺点，因为原来的，现在隐藏的选择是正在验证的元素，并且由无序列表组成的新可见下拉列表由 Bootstrap 插入到 DOM 中的原始选择下方，错误消息插入在原始选择之后，但在无序列表之前，因此它出现在自定义下拉列表上方，而不是像使用原始选择时那样出现在其下方。

要修复它，您可以轻松地移动任何给定元素的错误消息

$('#myform').validate({ // initialize the plugin
    ignore: [],
    rules: {
        year: {
            required: true
        }
    },
    errorPlacement: function(error, element) {
        if (element.attr("name") == "year") {
          error.insertAfter(".bootstrap-select");
        } else {
          error.insertAfter(element);
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

FIDDLE

【讨论】：

这项工作完美！谢谢。小问题：为什么错误信息This field is required.显示在输入表单的顶部？
因为新的基于无序列表的 select 被放置在 DOM 中原始 select 元素的下方，然后验证器在原始 select 之后插入错误消息，这是它验证的内容，并且它在您现在看到的自定义选择的无序列表之前结束，
当然，在选择字段后的正常验证中，错误消息 This field is required 自动隐藏（或添加任何 css，显示 seccess 消息）但现在，在修复必填字段后显示错误消息。
验证还是有问题。应该在将引导选择更改为默认选择输入时对其进行验证，但事实并非如此。也检查一下...ivanthevariable.com/…

【解决方案2】：

我遇到了类似的问题，所以这就是我如何扩展 @adeneo 的答案以及从 (the post here) 吸取的经验教训。

注意：碰到这篇文章的朋友，请阅读@adeneo的回答和 (the post here) 了解此解决方案的范围。

生成的代码对我来说可以完美运行，如下所示：

jQuery / javascript:

$(document).ready(function() {
    $.validator.setDefaults({
        /*OBSERVATION (1): note the options used for "ignore"*/
        ignore: ':not(select:hidden, input:visible, textarea:visible)',

        /*...other options omitted to focus on the OP...*/

        errorPlacement: function (error, element) {
            /*OBSERVATION (2): note how selection is on the class "selectpicker"*/
            if (element.hasClass('selectpicker')) {
                error.insertAfter('.bootstrap-select');
            } else {
                error.insertAfter(element);
            }
            /*Add other (if...else...) conditions depending on your
            * validation styling requirements*/
        }
    });

    $('#myform').validate({ 
        rules: {
            'year': {
                required: true
            }
        },
        messages: {
            'year': {
                required: 'Please select a year from the dropdown'
            }
        }
    });
});

HTML：

<form id="myform">
    <select name="year" class="selectpicker">
        <option value="">Year</option>
        <option value="1">1955</option>
        <option value="2">1956</option>
    </select><br/>
    <input type="submit" />
</form>

说明：

OBSERVATION (1): ignore: ':not(select:hidden, input:visible, textarea:visible)' 仅仅意味着忽略所有不是隐藏<select>、不可见<input> 和不可见<textarea> 的元素的验证。

用更简单的英语，它只是说验证隐藏的<select>，忽略隐藏的<input> 并忽略隐藏的<textarea>，这在很多情况下是我们通常想要的。 我认为这是一种更好的方式来确定应该忽略或不应该忽略哪些验证。

根据@Alvin Lee 的回答here，在表单元素上设置ignore 选项如下是可以的，但有一些注意事项；

$('#myform').validate().settings.ignore = 
    ':not(select:hidden, input:visible, textarea:visible)';

问题： 引导选择元素得到验证，但在每个其他输入元素上显示默认消息 This field is required，而不是用所有自定义验证消息覆盖它之前配置过。

修复：将ignore 设置移动到$.validator.setDefaults({...}) 块...瞧！！！

观察（2）：

我没有像@adeneo 那样做if (element.attr("name") == "year") {...}，而是决定选择class='selectpicker'... 然后在javascript 中，通过if (element.hasClass('selectpicker')) {...} 检查元素是否具有此类。这只是确保该规则可以应用于所有引导选择元素，只要它们用类 selectpicker 装饰。

希望这对有类似问题的人来说足够清楚和有帮助！

【讨论】：

【解决方案3】：

如果您使用 'selectpicker' 类来初始化 bootstrap-select 小部件，我建议通过更改 jquery validate 的默认忽略设置来部分解决该问题：

$.validator.setDefaults({ ignore: ':hidden:not(.selectpicker)' });

在您验证表单之前。这是一种更好的方法，您还需要按照adeneo 的假设移动错误消息。而且它仍然不会有与 select 类似的验证行为。隐藏父容器时会出现问题。如果您不使用 bootstrap-select，您的选择将不会在容器被隐藏时验证，但当您使用它时仍会验证。

【讨论】：