Validate elements on click but select element validation fires too early

问题

I have installed the jQuery validate plugin and have set the form to validate on click of each element. This works great except for select fields, they seem to fire too early because it is on click.

Is there a way to stop the select elements from firing the validation until they have chosen an option?

Here is my set up

$.validator.setDefaults({
    highlight: function (e) {
        $(e).closest('.questionWrap').addClass('error');
        $(e).closest('.questionWrap').find('.questionTitle').removeClass('questionTitle__valid');
    },
    unhighlight: function (e) {
        var qWrap = $(e).closest('.questionWrap');
        $(e).closest('.questionWrap').find('.questionTitle').addClass('questionTitle__valid');
        if (qWrap.find('.field-validation-error').length == 0) {
            $(e).closest('.questionWrap').removeClass("error");   
        }
    },
    onclick: function (e) {
        this.element(e);
    },
    ignore: ':hidden:not(.validateHidden)'
});

I tried to use a on change event like below, but it would not work for me

$("#Enquiry_Customer_Title").change(function () {
        $("#Enquiry_Customer_Title").valid();
    });

Here is a FIDDLE of my issue (But its not working for some reason) https://jsfiddle.net/barrycorrigan/vpyxbaq7/2/

来源：https://stackoverflow.com/questions/64355459/validate-elements-on-click-but-select-element-validation-fires-too-early