jQuery validate - unhighlight function not working for hidden element (selectize.js)

问题

The form below contains a selectize input and a submit button:

The selectize is a required field, so if the selectize is empty when the form is submitted an error message is shown:

Here is the JSFiddle.

The problem is that the error message is visible even after the user has selected an option.

jQuery validate ignores hidden elements by default so to get it to work on the selectize (the tag is hidden when selectize.js initialises), I initialised it with the option ignore: :not(.selectized).

This seems to work for lazy validation of the form (submitting the form when the input is empty triggers the error message to be displayed above it) but not for eager validation because the message still persists after the field has been filled in.

EDIT: Maybe it has something to do with the selectize input not triggering any of the events (onfocusout, onkeyup, onclick) that the plugin listens to for eager validation of an input? It works if I force validation using

$('.selectized').on('change', function() {

    $(this).valid();

})

but this seems like a hack.

来源：https://stackoverflow.com/questions/62607683/jquery-validate-unhighlight-function-not-working-for-hidden-element-selectize