What Event to Trigger Javascript Form Field Validation and Formatting?

javascript, usability, validation

Solution

By far the best answer so far was not an answer but a comment (see above.) I'm adding it as an answer in case anyone misses it in the comment.

See the following article on A List Apart.

Inline Validation in Web Forms by Luke Wroblewski

Problem

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.

Original source