如何使用 jquery 验证插件验证 select2 元素？答案

【问题标题】：How can I validate select2 elements with using jquery validation plugin?如何使用 jquery 验证插件验证 select2 元素？
【发布时间】：2015-07-08 22:25:17
【问题描述】：

我使用 select2 3.5.2 和 jquery 验证 1.13.1。我可以使用验证插件“highlight”方法将错误类添加到 select2 元素，但是当我选择一个值时，我无法删除该错误类。我该如何解决这个问题？

HTML

<form id="test" class="frm">
    <div>
        <input type="text" name="name" />
    </div>
    <div>
        <label for="singleselect"></label>
        <select class="sl" id="singleselect" name="singleselect">
            <option></option>
            <option value="val1">Val-1</option>
            <option value="val2">Val-2</option>
        </select>
    </div>

    <div>
        <label for="multipleselect"></label>
        <select class="sl" id="multipleselect" name="multipleselect" multiple="multiple">
            <option></option>
            <option value="val1">Val-1</option>
            <option value="val2">Val-2</option>
        </select>
    </div>

    <button class="btn">Submit</button>
</form>

$(document).ready(function () {

    $('.sl').select2({
        placeholder:'Select'   
    })

    $.validator.setDefaults({
        ignore: []
    });

    $('#test').validate({
        errorElement: 'span',
        errorClass: 'error',
        rules: {
            singleselect:'required',
            multipleselect:'required',
            name:'required'
        },

    highlight: function (element, errorClass, validClass) {

        var elem = $(element);

        elem.addClass(errorClass);

    },
    unhighlight: function (element, errorClass, validClass) {
        var elem = $(element);

            if(elem.hasClass('sl')) {
                elem.siblings('.sl').find('.select2-choice').removeClass(errorClass);
            } else {
                elem.removeClass(errorClass);
            }
        }
    });

});

https://jsfiddle.net/8Lyfa3k2/6/

【问题讨论】：

描述“它不能正常工作”是什么意思。

标签： jquery forms jquery-validate jquery-select2

【解决方案1】：

由于原来的 select 元素被 Select2 插件隐藏，jQuery Validate 插件无法再找到任何触发事件以在值更改时自动触发验证。

您只需创建一个自定义处理程序，即可在值更改时使用.valid() 方法以编程方式触发验证...

$('select').on('change', function() {  // when the value changes
    $(this).valid(); // trigger validation on this element
});

演示：https://jsfiddle.net/8Lyfa3k2/4/

您的unhighlight 功能显然已损坏。这似乎效果更好......

unhighlight: function (element, errorClass, validClass) {
    var elem = $(element);
    elem.removeClass(errorClass);
}

演示 2：https://jsfiddle.net/8Lyfa3k2/5/

【讨论】：