select2 and jquery validation not working properly

Question

Trying to use validation on select2 with a few issues :

• the error message will show, but it will not remove when a valid entry is entered.

• I

Answer 1

I was facing the same issue. You can try the below code to make it work. Select 2 add style display: none to the select. That's the reason form validation doesn't work as it's hidden. To override the validation and allow them to validate the hidden fields too.

 $(document).ready(function () {
        //Validate form mainly SELECT 2
        var $form = $("#your-form-id");
        $form.validate().settings.ignore = [];
    });

Answer 2

By default, the validation on a field is only triggered by these events (for a type="text" field)...

• onfocusout, when the user leaves a field (validates just the field)

• onkeyup, when the user is typing within a field (validates just the field)

• onclick, when the user clicks the submit button (validates the whole form)

If you need to programmatically trigger validation after you programmatically change the value of a field, then you need to invoke the .valid() method on that field. It will effectively trigger validation similar as the events above.

$('#myField').valid();  // validates just field element with id="myField"

$('#myForm').valid();  // validates the whole form

So you'll need to find a method within select2 that is fired whenever the value is changed and put .valid() inside of that. It looks like the change event is what you'll need.

$("#vedit-filter").select2({
    // your options here
}).on('change', function() {
    $(this).valid();
});