Skip to content

How Do I Show Form Errors Next to the Field Instead of One Big Error at the Top?

6 min read

To show form errors next to each field instead of one big banner at the top, you attach a validation message to each input and render it directly under that input, keyed to the specific problem with that field. The short version: track errors per field, not per form, and show each message where the user is looking. Here is how to get there without rewriting your form.

Why this happens

When you asked your AI agent to "build a signup form," it built the form and, if you were lucky, one catch-all error. That single banner at the top ("Please check your entries") is the default because it is the least code: one place to put one message. The agent built exactly what you asked for and stopped, because you did not ask for the thing that makes forms feel finished, which is telling the user which field is wrong and why, right where they can fix it.

The result works in the demo, because in the demo you fill the form in correctly. Real users mistype an email, leave a required box empty, or pick a password that is too short, then they hit a wall of one vague sentence and have to guess. Many just leave.

How to check

You can tell in under a minute whether your form has this problem.

  1. Open your form and submit it empty.
  2. Watch where the error appears. If a single message shows up at the top, or in a toast that slides in and vanishes, you have form-level errors only.
  3. Now type a clearly bad email like hello@ and submit. If nothing appears directly under the email field, that field has no inline message.
  4. Look at the input itself. A finished form usually turns the invalid field's border red and shows text beneath it. If the input looks identical whether it passed or failed, there is no per-field feedback.

If any of those checks come up short, your users are being told "something is wrong" without being told what.

The fix

The pattern is the same whether you are on React, plain HTML, or a form library.

  1. Store errors keyed by field, not one string for the form. An object like { email: "Enter a valid email", password: "Use at least 8 characters" } lets you look up the message for each input independently.
  2. Render the message under each input. Next to every field, add a small line that shows errors.email when it exists and nothing when it does not. Colour it red and give it a little space so it reads as belonging to that field.
  3. Validate on submit first, then on blur. Check everything when the user submits so nothing slips through. Then, once a field has shown an error, re-check it as the user leaves it so the message clears the moment they fix it. Validating on every keystroke from the start feels naggy; wait until they have tried once.
  4. Write messages that say what to do. "Invalid" is not a message. "Enter a valid email" and "Password must be at least 8 characters" tell the user the fix.
  5. Link the message to the input for screen readers. Give the input aria-invalid="true" when it fails and point aria-describedby at the id of its error text, so assistive tech reads the error with the field.

If you are on React, a form library like React Hook Form or the Zod resolver gives you the per-field errors object for free, so you mostly wire step 2. If you are on plain HTML, the browser's built-in constraint validation (required, type="email", minlength) gets you most of the way with no JavaScript at all.

The trap to avoid

Do not solve this by turning the single banner into a scrolling toast, or by firing an alert() for the first error you find. Both still make the user hunt, and the toast disappears before they finish reading it. The other common misstep is validating so aggressively, on the first keystroke, that the field screams "invalid email" while the user is still halfway through typing it. Errors should appear when the user is done with a field, not while they are working in it.

Where this fits

Forms are where your first beta users hand you their trust: their email, their password, their card. A form that cannot tell them what they got wrong is one of the quiet reasons sign-ups stall, and it never shows up when you test it yourself. It sits right next to knowing what your app should show when a request fails and making sure you stop users clicking submit twice. The free Readiness Report walks your real forms and flags the ones with no per-field feedback, and the Finishing Pass hands you the fixes in order so your forms are ready before the first stranger fills one in.