- Validate on blur, not on every keystroke — and never flag an error before someone has finished typing.
- Error messages need to name the problem and the fix ("Enter a date in the future"), not just say "Invalid".
- Match the input type to the data (email, tel, date) so the right mobile keyboard appears automatically.
- Never wipe a form on a failed submission — preserve everything the person already entered.
- Associate every error with its field programmatically, and never rely on color alone to signal a problem.
Validation exists to help people succeed, not to catch them out. But most forms get the details backwards: errors fire mid-keystroke, messages say "Invalid input" without saying what's wrong, and a single mistake near the top wipes out five minutes of typing. Each of these is a small thing. Together, they're one of the quietest causes of form abandonment — people don't leave because a form is hard, they leave because it feels hostile.
None of this requires new technology. It's a set of decisions about timing, wording, and structure that any form can get right. Here's what that looks like field by field.
Validate on blur, not on every keystroke
The most common validation mistake is checking a field on every keystroke. Type the first letter of an email address and a red "Invalid email" message appears before you've typed the @ sign. It's technically correct and completely unhelpful — of course it's invalid, you're not done typing.
Validate when someone leaves a field (on blur), not while they're still filling it in. That single change removes most of the false-alarm errors people see on a typical form, because it stops judging input that isn't finished yet.
Write error messages a person can act on
"Invalid input" tells someone nothing about what to change. A good error message names the problem and the fix in plain language: "Enter a date in the future", not "Invalid date". "Phone number must include an area code", not "Invalid phone". If you can't describe the fix in a short sentence, the validation rule itself is probably too vague.
Position matters as much as wording. Put the error directly next to the field it refers to, not in a summary banner at the top of the form. A banner that says "3 fields have errors" forces people to hunt for them; an inline message next to the field removes the hunt entirely.
- Say what's wrong and how to fix it, in one short sentence.
- Place the message immediately below or beside the field, not in a separate summary.
- Avoid technical language — "required", "format", and "pattern" mean nothing to most people.
Match the input type to the data
On mobile, the input type determines which keyboard appears — and the wrong keyboard is a form of friction most builders never test for. An email field should open a keyboard with @ and .com shortcuts. A phone field should open a numeric pad. A date field should open a date picker instead of asking someone to type 04/12/2026 by hand and hope the format matches.
This is a case where the right default does two jobs at once: it reduces typing errors before validation even runs, and it makes the form faster to fill out on the device most people are actually using.
Make required vs optional obvious up front
Nothing erodes trust faster than clicking submit and discovering a wall of required fields you didn't know about. Mark every field clearly as it appears — a small "optional" label costs nothing and removes guesswork, and it's far cheaper than a required-field surprise at the moment someone is trying to finish.
The same logic applies to the overall length of the form. If you're deciding how to lay fields out in the first place, it's worth reading multi-step vs single-page forms — validation is easier to get right on a short, focused step than on a long page where errors can hide far from view.
Confirm success, not just catch errors
Validation isn't only about flagging mistakes. A quiet green check or a subtle confirmation the moment a field is filled in correctly gives people a reason to keep going — it turns the form into a series of small, visible wins instead of a wall of blank fields. This matters most on longer forms, where reassurance that something "worked" keeps momentum up between steps.
Be forgiving about formatting
Strict formatting rules punish people for perfectly reasonable input. A phone field that rejects (555) 123-4567 because it expects 5551234567 is enforcing a computer's preference, not a real requirement. Strip spaces, dashes, and parentheses automatically before you validate, and accept the format people naturally type in.
The same applies to card-like fields, postal codes, and names with hyphens or apostrophes. Validation should catch genuinely wrong data — a phone number with nine digits, an email with no domain — not punish someone for a formatting choice that was never actually a problem.
Never wipe a form on a failed submit
If a submission fails — a server error, a missed field, a timeout — the worst possible outcome is a blank form. Losing everything someone just typed, especially on a longer form, is one of the fastest ways to lose them permanently. Preserve every value already entered, and show only the specific error that needs fixing.
Design errors for accessibility, not just sight
An error that only shows as a red border fails anyone who can't distinguish that color, and fails screen reader users entirely. Every error needs to be associated with its field programmatically — through `aria-describedby` and `aria-invalid` — so assistive technology announces the problem the moment focus lands on the field.
Color should support the message, not carry it alone. Pair red with an icon and text, not red on its own. This isn't an edge case: a meaningful share of visitors rely on assistive technology or have some form of color vision deficiency, and inaccessible validation locks them out of submitting at all.
If you're setting up a form from scratch, it's easier to build these habits in from the start than to retrofit them later — our guide to creating an online form walks through the setup end to end. In Formiqa, blur-based validation, clear field-level errors, and accessible markup are the default behavior, not an add-on you have to configure.
Frequently asked questions
Should I validate on every keystroke or when the field loses focus?
What makes a good error message?
How strict should phone and formatting validation be?
Is color-only error styling a real accessibility problem?
Build a better form with Formiqa.
Free forever. No credit card. No per-response fees.