All Patterns /
Form Capture /
Validation & Errors
Validation & Errors
Demonstrates comprehensive form error handling with an error summary panel, inline field errors, and screen reader announcements. Submit the form with empty or invalid data to see the full error experience.
Usage Notes
When to use
Use this error handling pattern on any form that requires validation. The error summary with linked field references is essential for forms with more than two or three fields, as it allows users to quickly identify and navigate to all errors.
Accessibility considerations
The error summary uses role="alert" to announce errors immediately. Each error in the summary links directly to the corresponding field. The total error count is announced via a live region. Focus moves to the error summary on submission failure. Individual field errors use the NYSDS component built-in showError and errorMessage properties. On successful submission, focus moves to the success alert.
NYSDS components used
nys-textinput, nys-textarea, nys-button, nys-alert
Customization points
Validation rules and error messages can be customized per field. The error summary format (numbered list with links) follows GOV.UK and WCAG best practices. Additional validation types (async server validation, cross-field validation) can be layered on. The success message can be replaced with a redirect or next-step action.