Most forms that frustrate users do so long before the submit button is clicked. The errors are unavoidable; the experience of encountering them is not. Getting validation timing and messaging right is one of the highest-impact improvements you can make to any form.
The Core Decision: When to Validate
There are three moments a form can check a field: while the user types, when they leave the field, and when they submit. Each has a different trade-off.
On input (real-time): Shows feedback immediately, which sounds good but often isn’t. Flagging an incomplete email address with a red state because the user hasn’t typed the ”@” yet is jarring. The user is mid-thought; they haven’t asked for an opinion. Real-time validation suits a narrow set of cases: fields with a live character count, or a strict format the user benefits from seeing as they go, such as a password strength indicator.
On blur (leaving a field): This is the default workhorse. When a user tabs or clicks away from a field, they’ve finished with it. That’s the right moment to check. Blur validation catches errors close to the point of entry, while the field is still fresh, which makes correction easy. One important caveat: if a field has already shown an error, validate on input from that point forward. Don’t make the user tab away again to see if their correction worked.
On submit: Always run a full validation pass on submit, regardless of any inline checking. Users navigate forms non-linearly. They may skip fields and come back, or autofill may populate values you haven’t checked. Submit validation is the safety net, not the primary mechanism.
The most effective validation strategy isn’t a single mode. It combines blur for clean fields, real-time recovery after an error has appeared, and a full pass on submit.
Writing Error Messages That Actually Help
The most common failure in form validation isn’t the timing. It’s the message.
“Invalid email address” tells users what went wrong but not how to fix it. “Please enter a valid email address” is marginally better but still vague. “Check there are no spaces before or after your email address” tells someone exactly what to look for.
Write messages from the user’s perspective: what did they probably do, and what should they do now? Four patterns worth keeping:
- Name the field. “Your date of birth must be in DD/MM/YYYY format” is clearer than “Please check the format”.
- Be direct, not apologetic. “Password must be at least 8 characters” beats “Oops! Your password is too short”.
- Don’t assign blame. “We couldn’t find an account with that email” instead of “You entered an incorrect email”.
- Tell them the rule before they break it. Format hints placed as placeholder or helper text reduce errors before they happen, which means fewer messages to write later.
Designing forms people complete covers field labels, layout, and input types in depth. Error handling is only one layer of that problem.
Positive Confirmation Is Underused
Most validation discussion focuses on errors. Confirming correct input is just as useful, and it’s regularly skipped.
A green checkmark next to a validated field does two things: it confirms the user got it right, and it removes the background worry of wondering whether the form will reject that field later. This matters most for complex fields like passwords, phone numbers with specific formats, or referral codes where the user can’t easily see whether they’ve entered the value correctly.
The key is proportion. A subtle checkmark icon or a green border is enough. Celebration animations or “Great job!” copy is overkill and feels patronising on a checkout form.
Micro-interactions are the right tool here: a small, purposeful signal that closes the feedback loop without distracting from the task at hand.
Displaying Errors on Submit
When a user submits a form with multiple errors, where and how you display those errors matters.
Two approaches work:
Inline only: Each field shows its own error message beneath it. The user scrolls through the form to find and fix each issue. This works for short forms where all fields are visible without much scrolling.
Summary plus inline: A message at the top of the form lists the fields that need attention, often as anchor links that jump to the relevant input, and each field shows its own message. This works better for longer forms and is more accessible: screen readers announce the summary immediately after submit, giving users an overview before they navigate to individual fields.
Neither is universally better. Choose based on form length and the weight of the submission action. A multi-step checkout benefits from the summary approach; a two-field login form doesn’t need it.
One thing to avoid in either case: clearing field values when showing errors. Making someone re-type their credit card number because of a validation failure is a conversion killer. Preserve what the user entered and point them to the specific problem.
Colour, Icons, and Accessibility
Red for errors, green for success: useful conventions, but not sufficient alone. Roughly 8% of men have some form of colour vision deficiency. A red border with no accompanying icon or text message fails that audience entirely.
The rule is simple: never communicate validation state through colour alone. Every error needs a visual indicator beyond colour (an icon, a label, a message) plus the message text. This is both a practical usability requirement and what WCAG 1.4.1 expects.
The stakes are higher at the start of a relationship. As the designing onboarding context makes clear, first-time users encountering a poorly communicated form error are forming an early impression of how much care went into the product.
How Strynal Approaches Form Validation UX
Forms are often treated as a solved problem. Drop in a library, add required attributes, ship. The result is usually technically functional but experientially rough: aggressive timing, generic messages, no positive confirmation, and errors that appear without guiding users forward.
At Strynal, we treat every form as a conversation. The validation layer is part of that conversation’s tone. Our UI/UX design service covers interaction design at this level of detail, from the timing of inline checks to the copy in every error state.
If your product has a form losing users at a rate that the fields themselves don’t explain, the validation UX is usually the first place to look. Get in touch and we’ll give you an honest read.