Library / Interaction & UX patterns / Inline validation
No. 033·noun·also called form validation, live validation, field errors

Inline validation

Checking each form field as it's filled in and showing problems right next to it, instead of after you submit.

SPECIMEN · LIVE DEMO
Definition

What it is

Inline validation checks a field as soon as someone finishes typing (or as they type) and shows a message beside it: "That email looks incomplete." People fix problems on the spot instead of hitting Submit and hunting for what went wrong.

Good inline validation waits until the person leaves the field before complaining, explains how to fix the problem, and doesn't make the form jump around when messages appear.

The alternative, a list of errors at the top after submitting, is frustrating on long forms.

Say it like a builder

How to ask for it

Vague

“People submit the form wrong and then don't see what the problem was.”

Precise

“Add inline validation to the sign-up form: check each field when the user leaves it, show a short red message directly under the field (with space reserved so nothing shifts), and turn the field border red until it's fixed.”

Why it works

The weak prompt describes a symptom; "inline validation" names the pattern and the prompt sets timing, placement, and no layout shift.

In the wild

You've seen this in

  • SPassword strength meters on sign-up pages
  • SStripe's card number field
  • IUsername availability checks on Instagram
Usage note

Often confused with