What Event to Trigger Javascript Form Field Validation and Formatting?

Question

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.

Answer 1

Validate and format it when the user exits the field.

Yes. Provide noninvasive feedback to the user if validation or formatting rules fail. By noninasive I mean don't popup an alert or modal dialog box, thereby forcing the user to click something. Rather dynamically display a message adjacent or underneath the field where validation or formatting failed.

Validate and format on every character entered.

No. I think that hinders usability. Instead provide the user with a tooltip or some other hint as to what the formatting rules are or validation rules are. E.g. for a "required" field the practically ubiquitious asterisk, and for fields with formatting tell the user up front what the expected format is.

Intercept keystrokes and prevent the user from entering characters that are wrong.

If you are going to prevent the user from entering invalid characters, tell the user why you just blocked their input, noninvasively. Also,do not steal focus of the field.

So for me the general principles are:

1. Inform the user up front about your validation and formatting rules.
2. Do not assume the user is sighted, so keep web accessiblity and screen readers in mind. (Unless you are developing a web site that has a limited target audience such as an Intranet.)
3. Provide the user with noninvasive feedback, meaning do not make the user click on an alert box or modal dialog upon each failure.
4. Make it obvious which input box failed validation or formatting rules, and tell the user why their input failed.
5. Do not steal the mouse/pointer focus, when providing feedback.
6. Keep tab order in mind, so that when keyboard oriented users complete a field, they can hit tab and go to the next logical input/selection field.