What this prompt does
This prompt designs and implements an accessible form validation system for a [form_type] form in a [framework] app, spanning [field_count] fields across [step_count] steps. It defines the validation strategy per field, error message patterns, visual field states, progressive disclosure for complex fields, a form-level error summary, edge-case handling, and success patterns. The result treats validation as a real feature, so long forms feel forgiving instead of punishing.
The variables tune timing and feedback. [validation_timing] implements a lazy-then-eager pattern, validating on blur first, then on change after the first error, so users are not nagged mid-typing. [async_fields] get debounced async checks with caching and a loading spinner, [error_position] and [error_style] define where and how messages appear, and [custom_messages] ensures plain-language copy that names the fix. [multi_step_fields] drives progressive disclosure like a password strength meter that checks off rules in real time, while [screen_reader] and [persistence_method] cover accessibility and data preservation across the [step_count] steps.
When to use it
- Building a multi-step signup or checkout where validation needs to feel forgiving.
- Implementing the lazy-then-eager
[validation_timing]pattern instead of validating on every keystroke. - Adding accessible error handling with a
role="alert"summary that focuses the offending field. - Showing real-time requirement checklists for
[multi_step_fields]like passwords. - Handling async uniqueness checks on
[async_fields]without hammering the server. - Preserving entered data across accidental navigation with
[persistence_method].
Example output
You get a validation implementation plan with code: per-field rules using the [validation_timing] lazy-eager pattern, debounced async validation with caching for [async_fields], error messages placed [error_position] with [error_style] styling and plain-language copy ([custom_messages] of them), field states (untouched, active, valid, invalid, warning) with subtle animations, progressive disclosure for [multi_step_fields], an accessible role="alert" summary linking to each error field, edge-case handling for double submission and navigation via [persistence_method], and a [success_feedback] confirmation.
Pro tips
- Use the
[validation_timing]lazy-eager pattern; validating on blur first and on change only after an error is the key to a forgiving feel. - Write
[custom_messages]in plain language that names the fix ("Email address is required"), not internal jargon like "validation failed." - Debounce
[async_fields]and cache results so a uniqueness check does not fire on every keystroke or repeat needlessly, and show a spinner while it runs. - Make the error summary a real
role="alert"region with links that focus each field; this is what makes the form usable with a screen reader and keyboard alone. - Preserve data via
[persistence_method]before anybeforeunload, so an accidental back navigation does not wipe a long form. - Map server-side validation errors back onto specific fields rather than only showing a generic banner, and prevent double submission with button state management on submit.
