Question

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

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，显示成功消息）但是现在，在修复必填字段后显示错误消息。在行为中：当我们选择年份时，错误信息不会隐藏。

如何解决此问题？

Answer 1

select插件会隐藏原始选择并创建一个新的选择，其中包含一个无序列表，用于更新隐藏的选择值，但默认情况下验证插件不会验证隐藏的元素，您必须使用ignore规则并启用验证隐藏元素

$('#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 select插件从无序列表中创建一个新的下拉列表，原始选择被隐藏，当用户与无序列表交互时，它的值会更新。

这也有移动错误消息的不利因素，因为原始的，现在隐藏的选择是被验证的元素，并且由无序列表组成的新的可见下拉列表由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

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

说明：

观察（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中，通过{{1}检查元素是否具有此类}}。这只是确保此规则可以应用于所有bootstrap-select元素，只要它们使用类if (element.hasClass('selectpicker')) {...}进行修饰。

希望这对于有类似问题的人来说足够明确且有帮助！

Answer 3

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

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

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

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

3 个答案: