Interaction with remote validated form

Question

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).

Answer 1

Consider using a timer based approach.

Have the all the events listed start a timer and set a last updated flag for the text box. When the event fires check to see if the time elapsed since the last update flag was shorter than the timer interval. If it was shorted then do nothing, otherwise call the update service.

The UI will seem to respond after a short pause. If they are typing a long value it won't update until they are done or until they pause.

Choosing the length of time for the timer in my experience is a matter of testing. I usually start with one second. It's value depends greatly on the responsiveness of your UI and service.