Inline Form Validation: How to Stop Enquiry Forms Frustrating Visitors

Your enquiry form is the last step between a visitor and a conversation. If it scolds them, they'll leave.

This article draws on research from Baymard Institute, which studies e-commerce usability. Their work looks at online shops, not service businesses. Even so, a phone number field behaves the same way on a checkout page and a contact page. Where we go beyond what Baymard found, we'll say so and label it as our advice.

The short answer: inline validation best practices

Inline validation means checking a field and giving feedback while the person fills in the form, not only after they press submit. Done well, it follows three rules:

1. Don't check too early. Wait until the visitor has had a fair chance to enter a valid value.
2. Clear errors instantly. Remove the message the moment the field is fixed.
3. Confirm what's right. Show a quiet sign that a field is valid.

Then keep your submit-time error handling as well. Inline checks add to it. They don't replace it.

What inline validation is, and why it's worth doing

Picture a visitor typing their email into your quote form. With inline validation, they find out about a typo before they move on. Without it, they find out after they've filled in everything else and pressed the button.

Baymard Institute's benchmark of top e-commerce sites, written up in January 2024, found that 31% of sites fail to provide inline validation.[1] That's a sizeable gap in a feature that's cheap to build.

Our advice is to look at your own forms before assuming you're covered. Many service-business sites use a template form that only checks on submit. If yours does, you've got room to improve.

Rule 1: Don't validate too early

Baymard's 2024 usability testing found that overly aggressive, premature validation hurts the experience. Flagging a field as wrong before the person has had a chance to enter a valid value is the problem.[1]

Nielsen Norman Group makes a similar point in its general form guidance. It says validation should ideally be inline, and that an error shouldn't appear until the user has finished with the field and moved to the next one.[2]

Here's how that looks in three common fields. The examples are our advice, not Baymard's.

Email

The moment someone types "j", the address is technically invalid. Showing a red warning after one character is noise. Wait until they leave the field, then check for a missing "@" or a missing domain.

Phone number

Phone numbers are typed in many ways, with spaces, brackets and country codes. Don't flag the field halfway through typing. Check once they've moved on, and accept sensible formats rather than demanding one rigid pattern. This matters if you serve the UK, Australia and Sri Lanka, where numbers look different.

Postcode

A postcode is incomplete until the last character lands. An error at the third character is simply wrong, because the person isn't finished. Check when they leave the field. If you use postcodes to confirm a service area, make that message helpful rather than a flat rejection.

Rule 2: Clear the error the moment it's fixed

Baymard recommends that an error message update live, at keystroke level, and disappear as soon as the user enters a valid value. They advise against letting it linger until the person leaves the field or resubmits.[1]

Think about the alternative. A visitor corrects their email, but the red message stays put. They wonder whether they've fixed it, and doubt creeps in. That's a small moment of friction, and it sits right in front of the button you want them to press.

Our advice is to treat this as a two-part pattern. Check when they leave the field the first time. After an error has been shown, re-check on every keystroke so it clears the instant the value is right. That keeps you clear of rule 1 and rule 2 at once.

Rule 3: Show positive confirmation

Baymard also recommends positive inline validation, meaning confirmation that a field is valid. In their research, it removes some cognitive load from users.[1]

In practice, that can be a small tick beside the field or a subtle colour change. It tells the visitor, "That one's done, move on."

Our advice is to keep it understated. A tick is plenty. Don't add animations or celebratory messages to a form that's meant to feel quick. Also, never rely on colour alone. Pair it with an icon or text so it works for people who can't tell the colours apart.

Write error messages that say what's actually wrong

Validation is only as good as the message it shows. In its December 2023 article on adaptive error messages, Baymard found that about 98% of benchmarked sites use generic error messages. Only about 2% use adaptive messages matched to the specific problem.[3]

That matters because vague messages cost time. In Baymard's checkout testing, some participants took up to five minutes to fix simple errors. Some got stuck entirely and were likely to abandon.[3] Baymard also found that specific messages shortened recovery time for all users and greatly reduced the number who got stuck.[3]

Compare these two messages for the same phone field. These are our examples:

• Vague: "Invalid input."
• Specific: "That phone number looks too short. Please include your area code."

The second one tells the visitor what to do. Our advice is to write one message per type of mistake. A missing "@" in an email isn't the same problem as an empty email field, so they shouldn't get the same text.

Mark required and optional fields clearly

Baymard's checkout tests, run between 2010 and 2021, found that only 14% of benchmarked sites mark both required and optional fields. When only the optional fields were marked, 32% of test users hit a validation error for a required field they had skipped.[4]

There's a caveat. That study covered e-commerce checkout and long account forms, not short contact forms.[4] So treat it as a prompt, not a rule.

Our advice for a short enquiry form is simple. Keep the form short enough that nearly every field is required, and say clearly which ones aren't. If you've got a "Company" or "How did you hear about us?" field, label it optional or remove it.

You still need submit-time error handling

Baymard says inline validation doesn't replace the traditional submit-time error page and design. Both are needed.[1]

There are good practical reasons for that, and they're our reasoning rather than a quote from any source:

• A visitor might press submit without touching a required field, so no inline check ever ran.
• Browsers and scripts can fail, and a form should still behave sensibly when they do.
• Your server should always check what it receives, whatever the browser did first.

Accessibility matters here too. WCAG 2.2 success criterion 3.3.1, at Level A, requires that when an input error is automatically detected, the field in error is identified and the error is described to the user in text.[5] Our advice is to make sure your submit-time errors do this, and to put a short summary at the top of the form that points to the fields that need attention.

A checklist for contact, quote and booking forms

Use this as a quick test. It's our advice, built on the research above.

Contact forms

• Check the email when the visitor leaves the field, not as they type.
• Make the message box optional to validate, or at least don't nag about length.
• Confirm valid fields with a small tick.

Quote forms

• Accept phone numbers in several common formats.
• Check postcodes only once they're complete, and explain what to do if you don't cover the area.
• Keep the number of required fields low, and mark the optional ones.

Booking forms

• Explain date and time problems in plain words ("That slot's taken. Try 2pm or 3pm.").
• Clear each error the instant the visitor picks a valid option.
• Keep submit-time checks in place for anything inline checks can't catch.

All forms

• Write a specific message for each kind of mistake.
• Test with real devices, on a phone as well as a desktop.
• Try to break it yourself: leave fields empty, type nonsense and press submit.

Next step: test your own form

Open your enquiry form on your phone. Fill it in badly on purpose. Notice when errors appear, when they vanish and what they say. If anything made you hesitate, a visitor will have felt it too.

Validation is one piece of form friction. Layout is another. If you haven't read it yet, our piece on single vs two column forms covers that side, so we won't repeat it here.

If you'd like a second pair of eyes, a Friction Audit at Deeesign; is a short review that finds where a website leaks enquiries. Forms are usually one of the first places we look.

Sources

1. Usability Testing of Inline Form Validation: 31% Don't Have It, 4% Get It Wrong (Baymard Institute)
2. Error-Message Guidelines / Errors in Forms Design Guidelines (Nielsen Norman Group)
3. Adaptive Error Messages (Baymard Institute)
4. Required and Optional Form Fields (Baymard Institute)
5. Understanding Success Criterion 3.3.1: Error Identification (W3C WAI)

Last reviewed: 4 November 2026. We check the facts in every article against the sources above before publishing.