Validation and Feedback Patterns

When a user enters information into a system/application, they expect to receive some type of feedback or validation of the data entered.

Best practices

Feedback messages help the user stay informed about the status of the task. As too many messages can also be disruptive, they should be used sparingly and be relevant to the completion of the task.

 

Validation in forms

Form elements which have an error are marked with a border and an error message underneath or next to the input field. The page should scroll to the first input field with an error on the page.

This field cannot be empty
 

Inline message

Inline messages display a validation/warning/error that concerns the whole task flow, rather than a single text input field. They usually appear at the top of the page or of the content area that is concerned.

This is an error message box.
This is an error message box with no image.