Javascript 引导选择插件不能与jQuery验证一起使用

我使用设计我的

HTML

selectbox。现在，我为我的表单添加了

validate

Plugin，但是，Validation表单不适用于引导选择插件

演示

HTML:

注意：

要检查此冲突，请从JS中删除第2行，jQuery验证已完成。

编辑：使用

忽略[]方法解决问题

现在，这已经奏效了，但我有一个新问题：在选择字段之后的正常验证中，错误消息
此字段是必需的
自动隐藏（或使用添加任何css，显示成功消息），但现在，错误消息显示在修复必需字段之后。在act中：当我们选择年份时，错误消息不会隐藏

如何修复此问题？
选择插件隐藏原始选择并创建一个新的选择，其中包含更新隐藏选择值的无序列表，但默认情况下，验证插件不会验证隐藏元素，您必须使用忽略规则并启用隐藏元素的验证

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


或


引导选择插件从无序列表创建一个新的下拉列表，当用户与无序列表交互时，原始选择被隐藏，其值被更新

这不允许同时移动错误消息，因为原始的、现在隐藏的选择是正在验证的元素，并且由无序列表组成的新可见下拉列表通过引导插入到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
    }
});

如果使用“selectpicker”类初始化引导选择小部件，我建议通过更改jquery validate的默认忽略设置部分解决此问题：

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

在验证表单之前。这是一种更好的方法，并且您还需要按照预期移动错误消息。
而且它仍然不会有与select类似的验证行为。隐藏父容器时会出现问题。如果您不使用引导选择，则当容器隐藏时，您的选择将不会验证，但当您使用它时，仍然会验证。
我也有类似的问题，下面是我如何扩展的答案以及从中吸取的教训

注意：对于那些无意中看到这篇文章的人，请阅读下面的答案
了解此解决方案的范围

结果代码对我来说功能完美，如下所示：

jQuery/javascript:

HTML:

问题：引导选择元素已得到验证，但在每个其他输入元素上显示默认消息
此字段是必需的
，而不是使用以前配置的所有自定义验证消息覆盖它

修复：将
忽略
设置移动到
$.validator.setDefaults（{…}）
块中。。。瞧

观察（2）：

我决定选择
class='selectpicker'
，而不是像前面指出的那样执行
if（element.attr（“name”）=“year”）{…}
。。。然后在javascript中，通过执行
if（element.hasClass（'selectpicker'））{…}
检查元素是否具有此类。这就确保了这个规则可以应用于所有引导选择元素，只要它们被类
selectpicker
修饰

希望这是足够清楚，并有助于有类似问题的人
 这可能会有帮助：这工作做得很好！谢谢小问题：为什么错误消息
此字段是必需的。
显示在输入表单的顶部？因为基于无序列表的新选择放在DOM中原始选择元素的下面，然后验证程序在原始选择之后插入错误消息，这就是它验证的内容，它在无序列表之前结束，您现在看到的是自定义选择，当然，在选择字段之后的正常验证中，错误消息
此字段是必需的
自动隐藏（或使用添加任何css，显示seccess消息），但现在，错误消息显示在修复必需字段之后。验证仍然存在问题。它应该在引导选择更改为默认选择输入时进行验证，但它不是。也看看这个。。。
$('#myform').data("validator").settings.ignore = "";

$('#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
    }
});

$('#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
    }
});

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

$(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'
            }
        }
    });
});

<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>

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