Where is the best place to show validation/error messages in a form? [duplicate]

Question

Where is the best place to show validation/error messages in a form?

1. Beside a field?
2. underneath a field?
3. Reserve an area on the top/bottom of the page, and show any error/successful message there?

Answer 1

There is no one right answer for this, it depends much on context.

For larger forms it makes sense to have a summary of errors as well as near the specific field that needs fixing, this is ideal for when a user submits a form and the page will reload, they see this at the top and can take action.

Here is a good example of this:

As a bonus, these could be linked to the area that needs to have the validation issue resolved to help a user jump down longer forms easier.

But if you were to have smaller forms, inline validation (around the input field) would be perfectly ok. This keeps the page less busy and distracting, bringing focus to the area that needs attention.

Answer 2

Highlight the field in error, also give instructions for the fields before they are filled out, two reasons to do this. First, the user can avoid getting the error if they know how to fill it out properly and Second, then you have no need to create space for the error message to be visible - just the error highlight on the field.

Big error messages can scare or just annoy users. Its a better experience to explain to your users how to use the form first than to make them feel bad after they have gone to the work of submitting the form.

Answer 3

The worst place to display a form error is at the top or bottom of the page. Why? It divorces the message/solution from the problem. The goal of any error message is to communicate how a user can remedy their mistake as quickly as possible preserving as much of their work as possible. Visually separating the problem message from the problem area confuses and frustrates users. It also increases the mental workload that a user must engage in, sometimes just to enter simple information (like a date, age, or address).

The best place to show validation success and/or error messages is near the problem. Whether the message appears above or beside a field is largely a matter of preference. The important thing is that the message is precisely and explicitly indicates what went wrong in a polite, human-readable language and communicates constructive instructions how to remedy this issue. (Adapted from Jakon Neilsen's "Error Message Guidelines")

Summary: Established wisdom holds that good error messages are polite, precise, and constructive. The Web brings a few new guidelines: Make error messages clearly visible, reduce the work required to fix the problem, and educate users along the way.

Answer 4

I like to list all errors at the top so the user can see them easily, and then make them clickable. The hyperlink then jumps to a matching HTML anchor. Here is a simple HTML example:

The errors:

<h2>There was an error with your submission</h2>
<ul>
   <li><a href="#jobtitle">Enter Job Title</a></li>
   <li><a href="#emailaddress">E-mail address must be valid</a></li>
   <li><a href="#state">Select your state</a></li>
</ul>

The fields

<a name="jobtitle"></a>
<label for="jobtitle">Job Title</label>
<input type="text" name="jobtitle" id="jobtitle" />

<a name="emailaddress"></a>
<label for="emailaddress">Email Address</label>
<input type="text" name="emailaddress" id="emailaddress" />

<a name="state"></a>
<label for="state">State</label>
<select name="state" id="state">
    <option value="AZ">Arizona</option>
    <option value="NY">New York</option>
    <option value="OH">Ohio</option>
    ...
</select>

That way, when you click on the error itself, it will automatically scroll to the right place in the page.

Hope this helps!

Answer 5

There is no one-size-fits-all answer, as the best approach may change depending upon the layout and complexity of your form.

Good user interface design requires elements that are clear, obvious, and intuitive. The user should know, at a glance, know what they did wrong, where the problem is and how to fix it.

My most frustrating personal example of bad validation was the time I tried reset my password at Sallie Mae to a new 18-character complex password. I tried for about half-an-hour to set my password but kept seeing this error message.

Invalid password. Passwords must be between 8 and 32 characters long, contain at least one number and at least one letter, and must not contain the word 'password' or your user name.

My problem was that the software didn't accept special characters, but I could not tell that from the message provided.

Only changing the color of invalid the form field, or putting a red asterisk beside it, without any explanation as to why it is invalid is not clear or obvious. I find that trying to fit the explanation of why the field is invalid may not fit next to the field.

In several of my forms (asp.net with JQuery), I put the validation errors at the top of the form, flash it, provide a message that tells exactly why the field is invalid and provide a link next to it that takes them back to the field.