Form Validation

From Interaction-Patterns.org

Contents 1 Form Validation 1.1 Quick Summary 1.2 Visual Examples 1.3 Examples found on the World Wide Web 1.4 Possible Solution 1.5 Rationale 1.6 This pattern is being used to 1.7 Source

[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

• http://www.example.com

YMMD with that awnser! TX

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

[edit] This pattern is being used to

• Help
• Feedback
• Prevent Errors

[edit] Source

• http://groups.ischool.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns/pattern.php?id=38