How can I validate select2 elements with using jquery validation plugin?

Question

I use select2 3.5.2 and jquery validation 1.13.1 .I could add error class to select2 elements with using validation plugin "highlight" method but when I select a value I can't remove that error class. How can I solve this?

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>

JS

$(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/

Answer 1

Since the original select elements are hidden by the Select2 plugin, the jQuery Validate plugin can no longer find any triggering events to automatically fire validation when the value is changed.

You simply have to create a custom handler to programmatically trigger validation, using the .valid() method, whenever the value changes...

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

DEMO: https://jsfiddle.net/8Lyfa3k2/4/

---

Your unhighlight function was apparently broken. This seems to work better...

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

DEMO 2: https://jsfiddle.net/8Lyfa3k2/5/