Inline Validation
即时校验
Tell the user while they type whether the value is right, instead of waiting until they submit.
Live Demo
Actually clickableAt least 8 characters
What you just saw:Typing an email and seeing a checkmark with "Format looks good" appear as you go, then "Enter a complete email address" on blur; a live-updating "Password strength: medium" under the password field.
What it actually is
Timing is the whole game with inline validation: erroring on every keystroke as the user types is the most irritating version of it, and validating on blur and submit is the correct one. Its difference from form validation is about where and when the message appears.
Anatomy · What it's made of
Field输入框
Red border in the error state
Message提示信息
Red or green, explains how to fix it
Icon状态图标
Check or bang, never the only signal
Timing时机
On blur or submit, never per keystroke
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The input has a hard format constraint | Yes |
| Errors can be detected automatically with an actionable fix | Yes |
| The form is long and filling it in is costly | Yes |
| Errors can only be known after submitting | Depends |
| The rules would fire an error on every keystroke | No |
Do not flash red the moment the user starts typing — let them finish first, then judge.
The message should tell the user how to fix it, not merely where the problem is.
Similar Patterns
Don't mix these upInline ValidationCurrent
即时校验
Tell the user while they type whether the value is right, instead of waiting until they submit.
Alert
警示框
A message that has to be taken seriously: something broke, something is at risk, and you need to act on it.
In one line:Tell the user while they type whether the value is right, instead of waiting until they submit.
Alert
警示框
A message that has to be taken seriously: something broke, something is at risk, and you need to act on it.
Text Field
文本输入框
A bordered box the user types into — the most basic input control there is, and the one whose quality varies the most.
Error State
错误状态
Something actually broke — not "no data", genuinely broken — and the user has to be told what to do about it.
Inline Validation
即时校验
Tell the user while they type whether the value is right, instead of waiting until they submit.
How to tell AI
Three levels of promptAdd the component name and specifics
Validate an email field on blur: when it is valid show a green check plus "Format looks good", when it is not show a red border plus "Enter a complete email address containing @".
Don't just say this to AI
Bad → BetterDon't say this to AI
Check the format while typing.
Say this instead
Add Inline Validation: validate only on blur and submit (never report an error from onChange on every keystroke), write error copy as an actionable fix ("Must contain @" rather than "Invalid format"), pair a red border with the error text plus aria-invalid and aria-describedby, and show a green check when the value is valid.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.