I have a form with one or more fields which must be validated by hitting a remote (ajax) service. I can validate at several different points, each of which seems to present pros and cons:
On keyup
Pros:
- happens as soon as the user types it
- avoids disappointing the user who thinks they can click submit, but as soon as they do they only then begin to wait for validation to complete
Cons:
- may hit service on each keystroke
- if user pastes a value in with context menu Paste function, won't run
- also doesn't run if field value is set programmatically (here you might think, well, if you are writing code to change it, manually tell the field to validate at the same time, and that is one part of the approach I'm currently taking in one case, although not having to remember to add that bit in would be nice)
- as soon as user starts typing the field invalidates until the remote test 'passes' which is annoying and confusing ('well, I was just on my way to typing in something valid - gimme a chance!')
On blur
Pros:
- hits the remote service less compared to on keyup
- would pick up changes made by context menu pasting
Cons:
- re-validates on blur if the user is tabbing through the fields even if they didn't stop there to change something
- doesn't work if the field was populated programmatically
if the remote validated field has focus and the user blurs the field by clicking the submit button then either
- the form would submit before the validation call returns (if the validation code doesn't prevent form submission when there are outstanding remote validation calls); allows for circumvention of validation, which is bad (yes yes, I know about and include server-side validation once the form does submit as well)
- the form simply doesn't submit, in which case you have to come up with a way to inform the user as to a) why the attempted form submission didn't happen and b) that soon, so very very soon, they'll be able to try again and then it'll work For Sure (TM); this is perhaps very confusing and non-trivial to communicate effectively to users in general
On change
Cons:
- still suffers from not firing (w/o extra code) on programmatic change as well as what about the case when the user just finished typing in that field and then blurs it by clicking submit
On form submit
Cons:
- if the field is not the last one in tab order it would be nice to kick off the remote validation as soon as possible so that the result can be displayed while the user is still filling out the form and before they go to submit it
- if you have client-side validation for another field, and it invalidates on submit and the user quickly scans the form to see what all needs fixing up before they can successfully submit the form, they'll note that there's only one item wonky, go to fix it, and then try to submit again. If the remote call comes back invalid in the meantime and they don't happen to notice it (could easily happen w/ page scroll or just not looking in the right spot, especially if the user hits enter to submit the form instead of clicking the submit button) then to their mind they are confused, thinking that they fixed everything that was wrong, and suddenly here's another thing wrong ('why didn't you say so earlier, like, when you let me know about that first thing? if I try again will it come up with yet a third thing wrong? my give up!')
Pros (listed second here, for better context on how some of the cons might be mitigated):
- can still allow for on change/blur remote validation, which will pick it up ASAP, but also disable the submit button and maybe display a spinner (activity indicator, not the poorly named form control) in the submit button to show that it's working on it while any remaining remote validations are outstanding, followed by allowing the form to submit if all is well, or scrolling to the first invalid field if a remote validation failed. Of all things so far, I like this one the best, but I'm still not entirely satisfied.
The question, then, is what minimizes user confusion, allows for a combination of fully-client side validations and remote validations, and requires the DRY-est, least obtrusive code (bonus points for not having to write my own or hack the guts of an existing validation library; for reference I'm using the jQuery validate plugin http://jqueryvalidation.org).