Formulaire React avec validation accessible (React Hook Form + Zod)

Prompt

Agis comme un développeur frontend senior spécialisé dans les formulaires accessibles et la validation robuste en React.

Contexte :
- Champs et règles : {{champs}}
- Ce qui se passe à l'envoi : {{envoi}}
- Bibliothèque : {{bibliotheque}}
- Styles : {{styles}}
- Langue des messages d'erreur : {{langue_messages}}

S'il manque un élément clé (format d'erreur du serveur, champs facultatifs, règles conditionnelles), pose-moi la question avant d'écrire du code.

Livrables :
1. Le schéma de validation typé (avec {{bibliotheque}}), avec des messages clairs qui expliquent comment corriger, et comment le réutiliser côté serveur.
2. Le composant du formulaire en TypeScript : libellés visibles associés à chaque champ, `aria-invalid`, `aria-describedby` vers le message d'erreur et l'aide, et focus sur le premier champ en erreur à l'envoi.
3. Un moment de validation raisonnable : pas d'erreur tant que l'utilisateur n'a pas quitté le champ, puis revalidation pendant la correction.
4. L'état d'envoi : bouton désactivé ou avec indicateur, prévention du double envoi, message de succès annoncé via une région `aria-live`.
5. Les erreurs serveur : comment les rattacher au bon champ ou les afficher comme erreur générale.
6. Une liste de cas de test (manuels ou automatisés), y compris au clavier et avec un lecteur d'écran.

Contraintes :
- La validation côté client est un confort, pas une sécurité : rappelle-le et indique ce qu'il faut toujours valider côté serveur.
- N'affiche jamais de données personnelles ni de mots de passe dans la console.
- N'invente pas d'endpoint : utilise [À COMPLÉTER] si je ne l'ai pas fourni.
- Utilise les attributs `autocomplete` et `inputmode` appropriés.

Format : un bloc de code par fichier avec son nom, et une brève explication de chaque choix.

Comment l'utiliser

Exemple d'utilisation

Exemple de résultat

import { z } from 'zod';

const telephoneFR = /^(?:\+33\s?|0)[1-9](?:[\s.-]?\d{2}){4}$/;

export const contactSchema = z.object({
  nom: z.string().trim().min(1, 'Indiquez votre nom'),
  email: z.string().trim().email('Indiquez un e-mail valide, par exemple nom@domaine.fr'),
  telephone: z
    .string()
    .trim()
    .regex(telephoneFR, 'Indiquez un numéro à 10 chiffres, par exemple 06 12 34 56 78')
    .or(z.literal('')),
  message: z
    .string()
    .trim()
    .min(20, 'Le message doit contenir au moins 20 caractères')
    .max(1000, 'Le message ne peut pas dépasser 1000 caractères'),
  confidentialite: z.literal(true, {
    errorMap: () => ({ message: 'Vous devez accepter la politique de confidentialité pour continuer' }),
  }),
});

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

Informations clés

Catégorie

Programmation et développement · React

Type de résultat

Code

Niveau

Intermédiaire

Conçu pour

ChatGPT, Claude, Gemini et Microsoft Copilot

Vérifié sur

En attente de vérification éditoriale

Variables

Champs et règles, Ce qui se passe à l’envoi, Bibliothèque, Styles et Langue des messages

Langue

Français

Prix

Gratuit, sans inscription

Mis à jour

07/11/2026

Questions fréquentes