Interactions · Forms

Form Validation

Also called: Input validation, Field validation, Form errors

Checking that what the user entered meets the rules, like required fields, phone number format, or password length, and showing a specific message when it doesn't.

Example

In detail

Form validation happens on the frontend and on the backend. Frontend validation checks right in the browser, which feels better to use. Backend validation stops people from bypassing the frontend, and you must have it. When you ask AI, ask for both.

For frontend validation, decide when to validate. Validating live while typing tends to show errors before the user is done. A better time is usually once when the input loses focus, then updating live on later edits. On submit, validate everything again and scroll the page to the first field with an error.

Put the error message right below its input, and state the rule clearly ("Password must be at least 8 characters and include a number"). Turn the border of the invalid input red. Don't just show "The form has errors" at the top.

Developer infoTerm ID, DOM cues, match priority

Term ID: interaction-form-validation
DOM selectors: No DOM cues. This concept isn't detected directly on a page.
Priority: 1 · when several match at the same level, the higher priority wins
Version: v1 · updated Sep 29, 2026