Show the error next to the field that caused it
A message at the top of a long form makes people hunt. Put the error by the field, say what went wrong and how to fix it, and keep what they typed.
Why it matters
When the only error message is a banner at the top of a long form, people have to remember it, scroll, find the field it means, and fix it from memory. Some never find it. An error placed next to the field is found at once, read in context, and fixed in one step.
How to do it
-
Put the message right by the field, usually just below it, and make room for it rather than covering anything.
-
Say what went wrong and how to fix it: “Enter an email address like name@example.com”, not “Invalid input”.
-
Keep what they typed. Clearing a field to show an error makes people start again.
-
Mark the field as invalid in a way that isn’t color alone: an icon and the message, not just a red border (tip #009).
-
In code, tie the message to the field, so screen readers read it with the field:
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error" /> <p id="email-error">Enter an email address like name@example.com</p> -
Check a field when someone leaves it or submits the form, not on every keystroke.
When it bends
A long form can also show a summary at the top on submit, linking to each field with an error. That’s an addition to the inline messages, not a replacement.