Trying to unobtrusively validate a required dropdown/select. Everything works fine when form is submitted. While user is editing, however, input is validated inconsistently depending on how they do it. Can demo this using the
standard jquery demo page (search for "Please select a fruit"):
1) Use your mouse to select a fruit from the list.
2) Tab out of field.
Valid value reported.
3) Use your mouse to select the first, default, "Select..." item. Valid value still reported. This is incorrect--the value has changed, but for some reason the event hasn't yet been fired to update the validation.
4) Tab out of field. Valid value still reported. Still incorrect.
5) Shit-Tab back into field, and validation gets fired, now correctly reporting that the empty value is not valid.
Now reload the page to reset validation states, and c
ompare above with this process. :
1) Using your keyboard, Tab to the fruit select control.
2) Using your arrow keys, select a fruit.
3) Tab out of field. Valid value reported.
4) Shift-Tab back into field.
5) Using your arrow keys, select the first, default, "Select..." item. Invalid value reported. This is correct, though why it didn't wait for the blur event I don't know. Appears to be firing on change, but then why the problem with the mouse steps above?
6) Note also that once this has been triggered as invalid, if you toggle back and forth with the house between a valid and the blank value, validation now fires immediately.