Design sample Nothing is submitted anywhere. The form makes no network request and stores nothing. Read the design notes →

Being told you are wrong before you have finished.

The most common interface in software, ruined most often by one decision nobody writes down: when the error appears. Type an email address into the form below under each of the three strategies and the difference is immediate.

Create an account

When errors appear

On every keystroke Turns red on the first letter of an email nobody has finished typing. Corrects you before you have started. Only when you submit Never nags — but a failure means hunting the form for what went wrong. Nothing tells you as you go. When you leave a field, then live Nobody is corrected mid-word, and once a field has complained it clears the instant you fix it. About six lines of difference.

errors shown 0 cleared 0 submits 0

What the form decided

How it is designed

Validate on leaving, then live

A field says nothing until the user has left it once. After that it revalidates on every keystroke. Those two rules together mean nobody is corrected in the middle of typing, and anybody fixing a mistake sees it clear the moment it is fixed rather than having to submit again to find out. It is the behaviour of every form that feels good to use, and it is about six lines of difference from the version that feels hostile.

Nothing is ever cleared

A failed submit keeps every value. This should not need saying, and it still happens — usually because the form round-trips to a server that re-renders it empty. Losing somebody’s typing is the single fastest way to lose them entirely.

The summary exists for people who cannot see the fields

On a failed submit the list at the top appears, focus moves into it, and each entry links to its field. A sighted user can scan a form for red borders; a screen-reader user submitting a long form has no way of discovering that anything went wrong unless focus is moved somewhere that says so. Each field also carries aria-invalid and an aria-describedby pointing at its own message.

Messages say what to do

“Use at least 8 characters” rather than “Invalid password”. The user already knows it is invalid — that is why it is red. What they do not know is what would satisfy it.

The email rule is deliberately permissive

One @, a dot after it, no spaces. Strict email regexes reject real addresses, and the only test that actually proves an address works is whether a message arrives at it. Being clever here costs you real customers and buys nothing.

Optional means optional

The phone field is labelled optional and validates only if something is typed. Marking the required fields instead of the optional ones is the more common choice and the wrong one when most of the form is required.

Other demos · Hire the developer