Validate on Blur, then on Change

FreeNew

The "reward early, punish late" strategy: a field stays quiet while typing, validates when you leave it, and once it has shown an error it re-validates on every keystroke so the message clears the moment it is fixed. Use this when live validation feels nagging but a stale error feels broken.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

You want validation timing that respects people: no errors while typing the first time, immediate relief when an error is fixed.

Do not use it when: For fields where every keystroke matters (password rules checklist) show rules live instead of errors.

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/validate-on-blur-then-change.json

Usage

import { ValidateOnBlurThenChange } from "@/components/validate-on-blur-then-change"

<ValidateOnBlurThenChange />

Props

The pattern takes no props. Copy it and change the rules; the timing logic is the form store's: errors are shown for a field after it was blurred, and validation runs on every change.

Accessibility

Nothing is announced while the first value is typed, so a screen reader is not interrupted mid-word. After the field has been left, the error is a role="alert" and the input gets aria-invalid.
When the error is fixed the alert disappears and the hint says "Looks good.", so the person gets confirmation without a color change alone.
Both fields keep their labels and use the right inputMode, so touch keyboards match the data.

Testing

The pattern ships with a Testing Library test (validate-on-blur-then-change.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.