带有验证插件的Jquery bootstrap select2插件问题

Question

在我的引导项目中，我尝试使用插件 select2，但我意识到 如果您使用此插件，则不再能够使用验证插件验证我的表单中的选择字段。 我会避免使用商业插件引导验证器..

<div class="container">
<div class="row">
    <form id="test_form" action="?">
        <div class="col-md-3">
            <div class="form-group">
                <label for="name">Foo</label>
                 <select class="form-control" id="foo" name="foo">
                     <option value=""></option>
                     <option value="1">1</option>
                     <option value="2">2</option>
                 </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label for="name">Bar</label>
                <select class="form-control" id="bar" name="bar">
                    <option value=""></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </div>
        </div>
        <div class="col-md-1">
            <button type="submit" class="btn btn-primary">VALIDATE</button>
        </div>
    </form>
</div>
</div>

JS

/* select 2 plugin */
$('select#foo').select2();

/* Validation */
$("#test_form").validate({
    rules:
    {
        foo: { required: true },
        bar: { required: true }
    },
    errorPlacement: function (error, element) {
        $(element).addClass('err');
    },
    success: function (label, element) {
        $(element).removeClass('err');
    },
    submitHandler: function(form) {
        alert("validation ok");
    }
});

在您看来，我该如何解决这个问题？谢谢

MY DEMO

Answer 1

好的。这对我有用

/* select 2 plugin */
$('select#foo').select2();

/* Validation */
    $("#test_form").validate({
        ignore: 'input[type=hidden]',
        rules:
        {
            foo: { required: true },
            bar: { required: true }
        },
        errorPlacement: function (error, element) {
            $(element).parent().addClass('has-error');
        },
        success: function (label, element) {
            $(element).parent().removeClass('has-error');
        },
        submitHandler: function(form) {
            alert("validation ok");
        }
    });

我添加了一个“忽略：'input[type=hidden]'”选项，因为 Select2 脚本向原始输入添加了一个隐藏选项，而 Jquery Validator 似乎忽略了它。然后我将元素上的错误类从“err”更改为父元素上的“has-error”（带有表单组类的div）