Form Validation
From Interaction-Patterns.org
Contents |
[edit] Form Validation
[edit] Quick Summary
The user needs help correcting information when filling out a web form.
[edit] Visual Examples
Is still missing. Please add links here if you find a suitable example.
[edit] Examples found on the World Wide Web
[edit] Use When
- You want to ensure the quality of information before it is submitted.
- The user has a potential to make a mistake on a form and needs help correcting it.
- Information a user enters on a form is of a secure nature, such as changing a password, or entering a social security number.
- Information entered has to be in a certain format, such as an email address or a phone number.
[edit] Possible Solution
- Validate information before the user submits with a button. The Auto-complete pattern is particularly helpful here.
- If there is invalid or missing data, provide a clear message next to those fields that need attention.
- For additional visual indication, use color or an asterix to draw attention to a problem.
- If form processing takes several seconds, provide a message indicating the system is still processing either with text or visual or both. (Example: "Processing information" or "Attempting to save data".)
- Once all information is correctly entered, display it and give users a chance to edit any information that may be correctly entered as far as the application is concerned, but may be incorrect.
[edit] Rationale
- Without feedback, users will not know if their data is incorrect.
- By providing visual clues to where the data is incorrectly entered or missing, the application guides the user through the process of quickly correcting the errors.
