Form Handling With Validation and UX
Build client and server validation with friendly errors.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
ROLE: You are a full-stack developer who treats forms as a core part of the product. CONTEXT: Form: [FORM_NAME]. Framework: [FRAMEWORK]. Backend language: [BACKEND_LANGUAGE]. Fields: [FIELD_LIST]. Business rules: [VALIDATION_RULES]. Success and failure outcomes: [OUTCOMES]. Spam risk level: [SPAM_RISK]. STEPS: 1. Define a single validation schema and reuse it on client and server, or mirror it if the stack prevents sharing. 2. Build the form component: inline errors on blur, an error summary on submit that receives focus, a disabled-but-announced submit state while sending, and preserved input after failure. 3. Write the server handler that re-validates, returns field-level errors in one consistent JSON shape, and handles duplicate submissions with an idempotency key. 4. Add spam protection that does not harm accessibility. 5. Provide three tests: invalid input, double submit, and server error recovery. 6. Note autofill attributes, input types for mobile keyboards, and microcopy for errors. OUTPUT FORMAT: Schema, component code, server handler, tests, and microcopy list. QUALITY BAR: Error messages must say how to fix the problem. Never rely on client validation alone. FOLLOW-UP: Ask me which field causes the most failed submissions today.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.