Inline form validation checks each answer as people fill in a form, so a mistake is caught next to the field instead of after pressing send. Timed well, it saves people from a page of errors at the end. Timed badly, it shouts Invalid email while they are still typing the first letter. This guide is ideal for beginners and for teams fine-tuning a form. We cover when to check, input masks, server side validation, and how it works in Echo Forms in WordPress, in about 10 minutes of reading.
The short version
- Check a field when people leave it, not while they type.
- Never show errors on a fresh form before anyone has tried.
- Use input masks for fixed shapes, such as phone numbers.
- Always check again on the server, because browsers can be skipped.
When does real time validation help?
When a mistake is easy to make and easy to fix, such as an email without an @ or a password that is too short. Catching it as people move to the next field saves them scrolling back later. It helps most on long forms, where an error at the end of a 3 step form means hunting through every step and can add 2 or 3 minutes. On a form that 200 people fill in each month, that is up to 10 hours of their time. The web.dev forms course shows the browser’s built-in checks, which handle most of it.
When does it get in the way?
When it fires too early. A message that appears after the first keystroke in an email field is wrong for 10 keystrokes before it is right, which feels like being scolded. Validation should wait until people leave the field, or until they press send for the first time. Echo Forms waits for the first real attempt to send before it colors fields as errors, because a calm form gets started more often.
| Timing | Good for | Avoid for |
|---|---|---|
| While typing | A password strength meter | Email, phone, names |
| When leaving the field | Email, phone, numbers | Fields people skip on purpose |
| When pressing send | Every field | Nothing; always do this |
| On the server | Every field | Nothing; always do this |
What is an input mask?
An input mask lets people type only valid characters in a set shape, such as (999) 999-9999 for a US phone number, where 9 means any digit. It prevents errors instead of reporting them, which is kinder. In Echo Forms, 9 is any digit, a any letter and * either, and anything else, such as brackets and dashes, is filled in for them.
How to set up validation in Echo Forms, step by step
- Mark the fields you need as Required.
- Use the right field type, such as Email, Phone or Number, so the browser checks the format.
- Add an input mask to fields with a fixed shape.
- Write a Custom validation message for fields people often get wrong.
- Switch on the error summary for long forms.
- Send the form with 3 deliberate mistakes and check every message. Ask 2 people who have never seen it to try too; it takes them about 5 minutes.
The field options guide covers masks and messages. Our form error messages guide has wording you can copy.
Why do you need server side validation too?
Because anything in the browser can be switched off or skipped by a bot. Echo Forms checks required fields, file types and hidden-field rules again on your server when the form arrives, so a field that should be hidden cannot have an answer slipped in. Server checks take a few milliseconds and protect every entry, every day.
Inline form validation works best when it is quiet until needed. Check on leaving a field, prevent errors with masks, and always check again on the server. It takes about 15 minutes to set up on a busy form, and our form design best practices cover the rest.
Checks that help instead of nag
Input masks, custom messages and server checks come with every Echo Forms form, free.
