Let me first say, we validate every field on the server side, so this a question about client-side usability.
What is the conventional wisdom on exactly when to validate and format html form input fields using javascript?
As an example, we have a phone number field. We allow numbers, spaces, parentheses, and hyphens. We want the field to have ten digits. Also, we want the field to look like (123) 456-7890, even if the user doesn't type it that way.
It seems like we can
- Validate and format it when the user exits the field.
- Validate and format on every character entered.
- Intercept keystrokes and prevent the user from entering characters that are wrong.
- Some combination of the above (e.g. format on entry and validate on exit, prevent on entry and format on exit, etc.)
- [Added] Wait and do all the validation and formatting when the user clicks submit.
I've seen it done all of these ways, but I can't find information about what is best (or even generally accepted) from a usability perspective, and more importantly, why.
[Edit: Some clarification]
We are absolutely not enforcing any format standards. When I say format, I mean we'll use javascript to rewrite things so they look nice. If the user types 1234567890, we'll change it to (123) 456-7890. There are no "formatting rules" that can fail.
I distinguish this from validation because if they don't type enough numbers, we have to make them fix it.
I guess I should rephrase the question as "what is the conventional wisdom on exactly when to validate and exactly when to format...?
Good info in the answers so far!
EDIT: I'm accepting my own answer below in the hopes that others will find the link as helpful as I did.