HomeCasa Prompts

React form with accessible validation (React Hook Form + Zod)

Generate a React form with a validation schema, accessible error messages, safe submission, per-field server errors and a test checklist to verify it. Designed for ChatGPT, Claude, Gemini and Microsoft Copilot. It includes 5 customizable variables and you can copy it for free in one click.

Intermediate · Code · Pending editorial review

Designed for:

Prompt

Act as a senior frontend developer who specializes in accessible forms and robust validation in React.

Context:
- Fields and rules: {{fields}}
- What happens on submit: {{submission}}
- Library: {{library}}
- Styling: {{styling}}
- Language of error messages: {{message_language}}

If something key is missing (server error format, optional fields, conditional rules), ask me before writing code.

Deliverables:
1. The typed validation schema (using {{library}}), with clear messages that tell users how to fix the error, and how to reuse it on the server.
2. The form component in TypeScript: visible labels tied to each field, `aria-invalid`, `aria-describedby` pointing to the error and hint text, and focus moved to the first invalid field on submit.
3. Sensible validation timing: no errors while the user is still in an untouched field, and revalidation as they fix it.
4. Submit state: button disabled or showing progress while sending, double-submit prevention, and a success message announced through an `aria-live` region.
5. Server errors: how to map them to the matching field or show them as a form-level error.
6. A list of test cases (manual or automated), including keyboard-only and screen reader checks.

Constraints:
- Client-side validation is convenience, not security: say so and list what must always be validated on the server.
- Never log personal data or passwords to the console.
- Do not invent endpoints: use [FILL IN] if I have not given them.
- Use the right `autocomplete` and `inputmode` attributes.

Output format: one code block per file with its name, plus a short explanation of each decision.

How to use it

  1. List the fields with their real rules (required, length, format). 2. Say which endpoint or Server Action receives the data. 3. Paste the code, test the form with the keyboard only and ask for specific tweaks.

Usage example

Fields: name (required), email (valid), phone (optional, US format), message (20-1000 characters) · Submit: POST /api/contact · Library: React Hook Form + Zod · Styling: Tailwind CSS.

Sample output

1. Shared schema (contactSchema.ts)

import { z } from 'zod';

const usPhone = /^(\+1\s?)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;

export const contactSchema = z.object({
  name: z.string().trim().min(1, 'Enter your name'),
  email: z.string().trim().email('Enter a valid email, like name@example.com'),
  phone: z
    .string()
    .trim()
    .regex(usPhone, 'Enter a 10-digit US phone number, like (555) 123-4567')
    .or(z.literal('')),
  message: z
    .string()
    .trim()
    .min(20, 'Your message needs at least 20 characters')
    .max(1000, 'Your message can be up to 1,000 characters'),
  privacy: z.literal(true, {
    errorMap: () => ({ message: 'Please accept the privacy policy to continue' }),
  }),
});

export type ContactInput = z.infer<typeof contactSchema>;

The same schema is imported in /api/contact via contactSchema.safeParse(body): client validation is a convenience, server validation is what protects you. The form uses zodResolver(contactSchema) with mode: 'onTouched', and every field gets aria-invalid plus aria-describedby pointing to its error…

Key facts

Category
Programming & development · React
Output type
Code
Level
Intermediate
Designed for
ChatGPT, Claude, Gemini and Microsoft Copilot
Verified in
Pending editorial verification
Variables
Fields and rules, What happens on submit, Library, Styling and Error message language
Language
English
Price
Free, no sign-up
Updated
Nov 7, 2026

Frequently asked questions

Why validate on the server if I already validate in the browser?

Because anyone can bypass the browser and send data straight to your API. Client-side validation improves the experience; server-side validation protects your data.

What makes an error message accessible?

It is linked to the field with aria-describedby, the field is marked aria-invalid, the text explains how to fix it, and focus moves to the first error on submit.

Can I use it without React Hook Form?

Yes. Pick another library or "no library" in the variable and the prompt adapts the schema and state handling.

What is this prompt for?

Generate a React form with a validation schema, accessible error messages, safe submission, per-field server errors and a test checklist to verify it.

Which AI tools does it work with?

It is designed for ChatGPT, Claude, Gemini and Microsoft Copilot. We have not verified it in these tools yet, so results may vary between them.

How do I customize the prompt?

Click “Customize” and fill in the variables (Fields and rules, What happens on submit, Library, Styling and Error message language). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.

Do I need experience to use it?

It is intermediate: it helps to know the topic so you can provide good context and review the result critically.

Is this prompt free?

Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.

Can I trust the AI output?

Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.

Related prompts