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?

5 Answers 5


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: enter image description here

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.

enter image description here

  • 3
    Bit harsh to downvote this and not say why it isn't useful. This is actually a more useful suggestion than just putting the message at the top (have to find the fields) or just putting it next to a wrong field (have to go through the whole form to see where the message is). I much prefer this method to any other, when I'm filling in a form and get something wrong. Commented Apr 23, 2014 at 13:48
  • @AndrewLeach I disagreed with the statement "There is no one right answer for this, it depends much on context." I believe there is a right answer. I believe summary statements at the top of forms are poor choices, usually dictated by the website's architecture than UX.
    – Hynes
    Commented Apr 23, 2014 at 18:19
  • 5
    @Hynes If you can predict that the form will fit entirely on one screen, then I'd agree, but if the form is spanning multiple screen scrolls, not having a summary can be a challenge, as now a user has to play "where's waldo" to find all the errors. I think grant is correct in stating there's no one way to handle this. Forms aren't all the same, and will likely require different approaches to error handling based on context.
    – DA01
    Commented Apr 23, 2014 at 20:26
  • And for the love of god, show all the errors (preferably live/javascript validation). It once took me a good dozen tries to get through a form (I think it was Apple) because there were absurd rules specified one at a time (even multiple password restrictions were presented one at a time) and only after submitting the form.
    – Kevin
    Commented Apr 24, 2014 at 1:14
  • 1
    +1 for accesibility. Screen readers, like JAWS, and blind people who use it, will thank you show a list of errors on top of the form.
    – Arkana
    Commented Apr 24, 2014 at 8:02

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.


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.

  • 1
    There are good accessibility reasons to have a summary of errors at the top, though. A summary doesn't mean you've separated the errors from the form. It's just that you're providing an additional summary of the errors that are in the form. (In other words, a summary does not preclude you from also putting the error messages near the problem)
    – DA01
    Commented Apr 23, 2014 at 18:09
  • @DA01 Having both wouldn't hurt, but in practice I rarely see both. It's one or the other. And in those cases, users will skip over a summary area to the form to find their error.
    – Hynes
    Commented Apr 23, 2014 at 18:16
  • 2
    which is fine. What can be a hindrance, however, is if it is a long form and you don't have a summary at the top. That can make completing the form with a screen reader a huge headache.
    – DA01
    Commented Apr 23, 2014 at 18:30

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

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>

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

Hope this helps!

  • Can you expand upon your answer? The must useful answers on this site cite external references in support of an argument. Good answers also include examples that help to demonstrate the validity of the proposed solution. Commented Apr 23, 2014 at 20:02
  • @CharlesWesley Sure! See my edit above.
    – CharleyDC5
    Commented Apr 24, 2014 at 11:58

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.