HomeCasa Prompts

Form React con validazione accessibile (React Hook Form + Zod)

Genera un form React con schema di validazione, messaggi di errore accessibili, invio sicuro, errori del server per campo e una checklist di test per verificarlo. Pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Include 5 variabili personalizzabili e puoi copiarlo gratuitamente con un clic.

Intermedio · Codice · In attesa di revisione editoriale

Pensato per:

Prompt

Agisci come sviluppatore frontend senior specializzato in form accessibili e validazione robusta in React.

Contesto:
- Campi e regole: {{campi}}
- Cosa succede all'invio: {{invio}}
- Libreria: {{libreria}}
- Stili: {{stili}}
- Lingua dei messaggi di errore: {{lingua_messaggi}}

Se manca qualcosa di importante (formato degli errori del server, campi facoltativi, regole condizionali), chiedimelo prima di scrivere codice.

Consegna:
1. Lo schema di validazione tipizzato (con {{libreria}}), con messaggi chiari che spieghino come correggere l'errore, e come riutilizzarlo sul server.
2. Il componente del form in TypeScript: etichette visibili associate a ogni campo, `aria-invalid`, `aria-describedby` verso il messaggio di errore e il testo di aiuto, e focus sul primo campo errato all'invio.
3. Tempistica di validazione sensata: nessun errore finché l'utente non ha lasciato il campo, poi rivalidazione mentre corregge.
4. Stato di invio: pulsante disabilitato o con indicatore, prevenzione del doppio invio, messaggio di successo annunciato tramite una regione `aria-live`.
5. Errori del server: come assegnarli al campo corrispondente o mostrarli come errore generale.
6. Un elenco di casi di test (manuali o automatici), inclusi uso solo da tastiera e screen reader.

Vincoli:
- La validazione lato client è comodità, non sicurezza: ricordalo e indica cosa validare sempre sul server.
- Non scrivere mai dati personali o password nella console.
- Non inventare endpoint: usa [DA COMPLETARE] se non li ho forniti.
- Usa gli attributi `autocomplete` e `inputmode` adeguati.

Formato: un blocco di codice per file con il suo nome e una breve spiegazione di ogni scelta.

Come usarlo

  1. Elenca i campi con le loro regole reali (obbligatorio, lunghezza, formato). 2. Indica quale endpoint o Server Action riceve i dati. 3. Incolla il codice, prova il form solo da tastiera e chiedi modifiche precise.

Esempio d'uso

Campi: nome (obbligatorio), email (valida), telefono (facoltativo, formato italiano), messaggio (20-1000 caratteri) · Invio: POST /api/contatti · Libreria: React Hook Form + Zod · Stili: Tailwind CSS.

Esempio di risultato

1. Schema condiviso (contattiSchema.ts)

import { z } from 'zod';

const telefonoIT = /^(?:\+39\s?)?[03][\d\s]{5,11}$/;

export const contattiSchema = z.object({
  nome: z.string().trim().min(1, 'Inserisci il tuo nome'),
  email: z.string().trim().email('Inserisci un’email valida, ad esempio nome@dominio.it'),
  telefono: z
    .string()
    .trim()
    .regex(telefonoIT, 'Inserisci un numero italiano, ad esempio 333 1234567')
    .or(z.literal('')),
  messaggio: z
    .string()
    .trim()
    .min(20, 'Il messaggio deve contenere almeno 20 caratteri')
    .max(1000, 'Il messaggio non può superare i 1000 caratteri'),
  privacy: z.literal(true, {
    errorMap: () => ({ message: 'Devi accettare l’informativa sulla privacy per continuare' }),
  }),
});

export type ContattiInput = z.infer<typeof contattiSchema>;

Lo stesso schema viene importato in /api/contatti con contattiSchema.safeParse(body): la validazione lato client è una comodità, quella lato server è ciò che protegge. Il form usa zodResolver(contattiSchema) con mode: 'onTouched' e ogni campo ha aria-invalid e aria-describedby collegato al suo errore…

Dati chiave

Categoria
Programmazione e sviluppo · React
Tipo di output
Codice
Livello
Intermedio
Pensato per
ChatGPT, Claude, Gemini e Microsoft Copilot
Verificato in
In attesa di verifica editoriale
Variabili
Campi e regole, Cosa succede all’invio, Libreria, Stili e Lingua dei messaggi
Lingua
Italiano
Prezzo
Gratuito, senza registrazione
Aggiornato
07/11/2026

Domande frequenti

Perché validare sul server se valido già nel browser?

Perché chiunque può aggirare il browser e inviare dati direttamente alla tua API. La validazione client migliora l’esperienza; quella server protegge i dati.

Cosa rende accessibile un messaggio di errore?

Essere collegato al campo con aria-describedby, che il campo abbia aria-invalid, che il testo spieghi come correggere e che il focus vada al primo errore all’invio.

Posso usarlo senza React Hook Form?

Sì. Scegli un’altra libreria o «senza libreria» nella variabile e il prompt adatta schema e gestione dello stato.

A cosa serve questo prompt?

Genera un form React con schema di validazione, messaggi di errore accessibili, invio sicuro, errori del server per campo e una checklist di test per verificarlo.

Con quali strumenti di IA funziona?

È pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Non lo abbiamo ancora verificato in questi strumenti, quindi i risultati possono variare da uno all'altro.

Come personalizzo il prompt?

Clicca su «Personalizza» e compila le variabili (Campi e regole, Cosa succede all’invio, Libreria, Stili e Lingua dei messaggi). Il testo si aggiorna all'istante e poi puoi copiarlo con un clic. I valori vengono salvati solo nel tuo browser.

Serve esperienza per usarlo?

È di livello intermedio: conviene conoscere l'argomento per fornire un buon contesto e valutare il risultato con occhio critico.

Questo prompt è gratuito?

Sì. Tutti i prompt di HomeCasa Prompts sono gratuiti, senza registrazione né abbonamento. Puoi usarli anche in progetti professionali.

Posso fidarmi dell'output dell'IA?

Consideralo una bozza di alta qualità: verifica sempre dati, cifre e affermazioni importanti prima di pubblicare o prendere decisioni.

Prompt correlati