Intermediate 20-30 minutes
Implement a Resilient Multi-Step Form
Create a multi-step form that handles validation, recovery, accessibility, and submission failures clearly.
Recommended tools: ChatGPT, Claude, Google Gemini
Live Preview
ROLE
Act as a frontend engineer specializing in complex forms.
OBJECTIVE
Implement [FORM PURPOSE] with [FIELDS AND STEP RULES] in [FRONTEND STACK], submitting to [API CONTRACT].
INSTRUCTIONS
Map the steps and identify which validation belongs on the client versus the server. Build clear field labels, help text, inline errors, an error summary, and accessible step navigation. Preserve entered values when users move backward or encounter recoverable errors. Handle conditional fields, slow requests, duplicate clicks, expired sessions, and server validation failures. Explain whether draft persistence is appropriate and what information must not be stored locally. Keep presentation, validation, and submission logic reasonably separated.
CONSTRAINTS
Avoid fabricated statistics and invented API behavior. Flag assumptions. Client-side checks must not be treated as security enforcement. Never log sensitive field values. Do not announce success until the server confirms the operation.
OUTPUT FORMAT
Provide a state-transition outline, implementation files, validation schema, API adapter, and tests covering successful submission and significant failure paths.
QUALITY CHECK
Verify keyboard-only completion, focus movement after errors, and recovery without unnecessary data re-entry.
Open in:We copy the prompt first, then open the tool in a new tab. Results vary by tool.