Form Validation
This topic collects the decisions a form has to make about input before it is trusted. Blocking a submit until a field is correct, matching a value against a stated rule, wiring error text to the control it describes, announcing a problem without stealing focus, and keeping server and browser checks in agreement are the recurring tasks. Each example records whether validation runs on input, on blur, or on submit, and which browsers or assistive technology paths were verified. Use the task groups to move from a single field rule to an accessible error summary, then follow relationships into the fetch examples that send the accepted value and the markup examples that give the field its accessible name in the first place.
In scope: Include examples that decide whether input is acceptable, or that surface a validation result to the reader. Out of scope: Exclude submission transport concerns that belong to fetch, and exclude styling of inputs without any checking rule.
7 published examples across 3 primary task groups. Read the group heading to find the task you are solving, then pick the Example whose assumptions match your page.
Author accessible form markup
2 examplesWrite native form markup whose labels, grouping, and error associations are announced correctly.
Associate every form control with an explicit label
Bind each input, select and textarea to a label with matching for and id values so the control has a name, the label is clickable, and errors have something to describe.
Group related checkboxes with a fieldset and legend
Give a set of related checkboxes a group name with fieldset and legend, keep every box individually labelled, and know why the same shape must not be used for either-or choices.
Create CSS design tokens
1 exampleExpress reusable colour, spacing, and focus values through custom properties and the cascade.
Style a visible keyboard focus ring with custom properties
Give keyboard focus a ring that survives both colour schemes and forced-colors mode by driving :focus-visible outlines from width, offset, and colour tokens.
Validate form input
4 examplesDecide whether entered data is acceptable and report the result to the person filling the form.
Announce field errors without moving the caret
Report validation failures beside the field they describe, announce them politely, and leave focus where the reader typed.
Type the validation state of a controlled form
Key field errors and touched flags off the form's own field names, so a renamed input cannot keep an orphaned message and the compiler lists every field left unhandled.
Validate a controlled React form on submit
Keep field values in state, run one rule pass on submit, and render messages beside the fields they describe without interrupting typing.
Validate form input before the browser submits it
Add cross-field rules to a plain HTML form inside its submit handler, report them through the browser's own validity API, and keep the built-in messages working.
Adjacent navigation
- Parent: Home
- Browse by language: JavaScript
- Browse by language: TypeScript
- Browse by language: CSS
- Browse by language: HTML
- Other topics: CSS Layout
- Other topics: Data Transformation
- Other topics: DOM Events
- Other topics: Fetch and HTTP
- Other topics: React State
- Or search: Search examples