Functional demo
Validate before sending
Submit the empty form to inspect summary focus and inline errors. A valid submission demonstrates a protected pending state and an announced success.
Error model
Connect summary, field, and recovery
The summary receives focus, every message names the correction, and each link returns to its control. Values remain available for repair.
Summary
tabindex="-1"Control
aria-invalid="true"Message
aria-describedbySubmission
Protect the transition
Prevent duplicate requests while pending. Keep entered data on failure and announce an in-place success without moving focus unexpectedly.
PendingBusy and disabled
FailurePreserve values
SuccessAnnounce outcome
Responsive behavior
Keep source order stable
Related fields use two columns when space allows and collapse to one column with full-width actions on compact screens.
Usage guidance
Validate at the point of commitment.
Avoid interrupting unfinished input. On submission, show every current problem together and keep the path to recovery short.
Next pattern: Settings and Account