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.
Build client and server validation with friendly errors. Framework and language: [FRAMEWORK_AND_LANGUAGE]. Form fields and rules: [FIELDS_AND_RULES]. Where data goes: [DATA_DESTINATION]. Accessibility and privacy requirements: [REQUIREMENTS].
Deliver code that satisfies this checklist, and then confirm each item against your code:
[ ] Server-side validation is the source of truth; client-side validation only improves usability
[ ] Rules are defined once and shared where possible (a schema)
[ ] Validation messages are specific and helpful ("Enter a date in the format 25/12/2026")
[ ] Errors appear next to fields and in a summary, are linked with aria-describedby, and are announced
[ ] Valid input is preserved after an error
[ ] Validation timing: on blur for format checks, on submit for the rest; not while the user is still typing
[ ] Proper input types and autocomplete attributes
[ ] Protection against double submission and a clear loading state
[ ] Protection against cross-site request forgery and automated abuse (token and rate limit)
[ ] Data is sanitized or encoded correctly on output; no sensitive data in URLs or logs
[ ] Success confirmation that is announced and tells the user what happens next
[ ] Tests: valid, invalid, boundary, injection-like input, and keyboard-only submission
Include the code, the schema, the tests, and notes on trade-offs. Don't use client-side checks as the only protection.
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.