Forms Error Messages

Problem

Users have entered input that could not be validated and they must be prompted to correct the input.

Solution

Tell the users that there is a problem and how to solve the problem. Also tell the users where the problem occurred.

HTML code here
	

CSS code here
	

Use When

Users have are trying to fill in Form and one or more of the fields is syntactically invalid or missing. Usually, there two kinds of problems: a) the field has not been filled in at all, or b) the field contains data in the wrong format.

How

The error message that is given needs to tell the users:

• That an error has occurred. This is best done by displaying a colored box at the top of the page containing a "important notice". The notice must say what the problem is and that the users can repair the problem by going to the "problem"-field and changing the input.
• Where the error occurred. This is also done by stating the problem fields in the box at the top of the page in combination with a marking at the problem field itself. For example, the form widget can be colored as is done in the example above.
• How the error can be repaired. This is done by giving repair information next to the problem field. This information must be marked visually in order to stand out as being "help information". Usually, such help information tells to users about the correct syntax of the entry field.

Although giving good error messages is important, one should always assess if the problem can be prevented! For example, using Constraint Input is can sometimes be possible to prevent incorrect input.

Why

Obviously, users must be made aware of the fact that there is a problem. Doing this a the top of the page in a visual distinct box assures that users will see it. In addition, users must receive helpful information that will put them on track again. TO achieve that it is important to give help information near the problem field itself so that the "problem" and the "solution" are close to each-other.

Examples