Jquery-validation: Live validation not working on select

[kodeo]

Live validation before first use of .valid() doesn't work for selects like it does for input texts, e.g.

<form id="f">
  <div><input type="text" id="a" name="a" class="required"></div>
  <div>
    <select id="b" name="b" class="required">
      <option value="">Please select...</option>
      <option value="foo">Foo</option>
      <option value="bar">Bar</option>
    </select>
  </div>
  <div><input type="text" id="c" name="c" class="required"></div>
</form>
<button>Save</button>

Fiddle here: https://jsfiddle.net/4hq3b0ub/

[max-preuschen]

I'm stumbling across this at the moment as well.

It seems to me that the live validation on <select> is only triggered, when the select box looses focus (blur) and not when the actual value changes (change).

Maybe there is a workaround for that?

[ghost]

This is similar to: https://github.com/jzaefferer/jquery-validation/issues/997

[max-preuschen]

Thanks for the hint - this works for me.
Here is the code to make it work in the JsFiddle example as well:

$('select').on('change', function(){
    $("form").validate().element('select');
});

[cmbkla]

@max-preuschen thanks for the simple workaround. I am also encountering this issue on version 1.15.0

[thekodester]

This effects date pickers, files, and select elements (basically any that require a change event).

[tedw]

FYI, found this in the docs when trying to figure out why validation wasn’t happening on selects on change:

Validation event

By default, forms are validated on submit, triggered by the user clicking the submit button or pressing enter when a form input is focused (option onsubmit). In addition, once a field was highlighted as being invalid, it is validated whenever the user types something in the field (option onkeyup). When the user enters something invalid into a valid field, it is also validated when the field loses focus (option onfocusout).

The goal of these interactions is to provide feedback as early as possible, whilst avoiding user annoyance. Displaying error messages before the user had the chance to even type something is not helpful.

https://jqueryvalidation.org/reference/#link-validation-event

[ntimmerman]

Seems like there should be a switch I could use to tell jquery to validate all of my fields at once. We have a lot of complex forms that require us to handle the Save or what is labeled as "submit" but is not actually a form.submit() so we can show various modal confirmations first, prior to submitting.