Guide pratique · IA & interfaces · 7 min de lecture
Erreurs de formulaire : expliquer, corriger et réessayer
Construis un parcours de validation avec erreurs de champ et serveur, focus et reprise sûre.
Réponse directe
Relie chaque valeur refusée à une explication utile, conserve la saisie valide et propose une reprise claire. Relie le résumé aux champs, vérifie le focus au clavier et distingue le refus serveur de la panne réseau. Confirme le succès seulement après acceptation de l’opération par le serveur.
Sources et révision
- Mis à jour le
- Révision
- 2026-09-09 · 92ab6c11bffe
- Sources
- 2 sources
- Statut
- Publié
Dans ce guide
01
1. Prépare un formulaire simple à tester
Relie chaque valeur refusée à une explication utile, conserve la saisie valide et propose un chemin clair pour renvoyer le formulaire. Une bordure rouge seule ne dit pas quoi corriger.
Prérequis : un formulaire modifiable, ses règles métier, un environnement de test et le contrat des réponses serveur. Prends un formulaire de contact avec nom et e-mail. Note les champs obligatoires, formats acceptés et la réponse qui prouve l’enregistrement ; une animation ne le prouve pas.
02
2. Explique l’erreur du champ
Utilise un label natif et un type de champ adapté, avec required ou les contraintes pertinentes. Explique le format avant l’envoi. Commence par valider à l’envoi ; si tu ajoutes une validation à la sortie du champ, évite d’interrompre une valeur inachevée à chaque frappe.
Pour un e-mail invalide, affiche « Saisis une adresse e-mail comme alex@example.com ». Relie le message persistant au champ avec aria-describedby et pose aria-invalid="true" uniquement pendant l’erreur. Conserve aussi les instructions utiles dans cette description. Retire les erreurs périmées après correction ; si tu utilises setCustomValidity, efface son message avec une chaîne vide.
03
3. Rends les erreurs accessibles
Après un envoi refusé, affiche un résumé au-dessus du formulaire avec des liens vers les champs concernés. Choisis et teste une stratégie : focus sur ce résumé, rendu focalisable par programme, pour plusieurs erreurs ; ou sur le premier champ invalide pour un formulaire court. Ne déplace pas le focus pendant la saisie normale.
Quand les erreurs apparaissent dynamiquement, rends le changement perceptible avec une annonce adaptée. Teste avec un lecteur d’écran pour éviter une double lecture par le focus et une région dynamique. Les liens du résumé doivent réellement amener la personne au champ au clavier.
04
4. Traite le refus serveur et les résultats incertains
Le serveur doit valider indépendamment. Relie un refus propre à un champ à ce champ ; présente une panne du service au niveau du formulaire avec une action de reprise. Ne marque pas tous les champs invalides parce que le réseau est coupé. Conserve les valeurs non sensibles et explique toute valeur sensible à ressaisir.
Empêche les envois simultanés pendant la requête et indique cet état en texte. Après un délai dépassé, vérifie le statut de l’opération si le service le permet avant de réessayer : l’enregistrement a pu aboutir. Définis la prévention des doublons avec le backend. Annonce le succès seulement après confirmation du résultat attendu par le serveur.
- Une règle de champ échoue : explique la valeur à changer près de ce champ.
- Le service est indisponible : garde le formulaire intact et propose de réessayer plus tard.
- Le résultat est inconnu : retrouve le statut avant de répéter l’opération.
05
5. Exécute le scénario de reprise
Dans l’environnement de test, envoie un formulaire vide, puis un e-mail mal formé, puis une valeur apparemment valide refusée par le serveur. Suis les liens du résumé au clavier, corrige une erreur et vérifie que les autres valeurs restent présentes. Simule une panne, rétablis le service et termine un enregistrement réussi.
Note le comportement attendu et observé, le navigateur, la version et toute combinaison de lecteur d’écran non testée. Un serveur simulé prouve le traitement de la simulation par l’UI ; vérifie séparément la persistance sur le vrai backend de test. Ce guide fournit une procédure, pas un endpoint de formulaire opérationnel.
06
Vérifie la reprise après une deuxième erreur
Saisis un nom valide et un e-mail incorrect, envoie puis corrige seulement l’e-mail. Si un autre champ est refusé, son message doit le nommer et expliquer la correction. Suis le lien d’erreur au clavier et vérifie que le nom valide reste présent.
Un nombre d’erreurs seul n’explique pas la reprise. La confirmation finale doit décrire le résultat réel de l’envoi ; effacer les erreurs visibles ne prouve pas l’enregistrement serveur.
À conserver
Preuves à conserver
- 01L’erreur explique une correction et reste associée au champ.
- 02La reprise au clavier conserve les valeurs valides et atteint un succès confirmé.
- 03Refus serveur, panne et enregistrement incertain ont des issues distinctes.
- 04Chaque lien du résumé déplace le focus clavier vers le champ correspondant.
- 05Un champ corrigé perd son erreur périmée sans effacer les autres valeurs.
- 06L’envoi en cours empêche les doublons et expose un statut lisible.
Sources primaires
Les affirmations techniques de ce guide sont reliées aux spécifications et documentations first-party.
Continuer
Guides et outils associés
Comprendre → Reconnaître → Choisir → Comparer
Pack pour ton agent
Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.
Implémenter correctement
Applique « Erreurs de formulaire : expliquer, corriger et réessayer » pas à pas
# Applique le guide « Erreurs de formulaire : expliquer, corriger et réessayer » dans ton agent ## Objectif Relie chaque valeur refusée à une explication utile, conserve la saisie valide et propose une reprise claire. Relie le résumé aux champs, vérifie le focus au clavier et distingue le refus serveur de la panne réseau. Confirme le succès seulement après acceptation de l’opération par le serveur. ## Prérequis - Inspecte le dépôt, la documentation et les conventions existantes. - Confirme que le besoin correspond au périmètre du guide : Construis un parcours de validation avec erreurs de champ et serveur, focus et reprise sûre. - Préserve les décisions correctes déjà en place. ## Étapes du guide - 1. 1. Prépare un formulaire simple à tester — Relie chaque valeur refusée à une explication utile, conserve la saisie valide et propose un chemin clair pour renvoyer le formulaire. Une bordure rouge seule ne dit pas quoi corriger. - 2. 2. Explique l’erreur du champ — Utilise un label natif et un type de champ adapté, avec required ou les contraintes pertinentes. Explique le format avant l’envoi. Commence par valider à l’envoi ; si tu ajoutes une validation à la sortie du champ, évite d’interrompre une valeur inachevée à chaque frappe. - 3. 3. Rends les erreurs accessibles — Après un envoi refusé, affiche un résumé au-dessus du formulaire avec des liens vers les champs concernés. Choisis et teste une stratégie : focus sur ce résumé, rendu focalisable par programme, pour plusieurs erreurs ; ou sur le premier champ invalide pour un formulaire court. Ne déplace pas le focus pendant la saisie normale. - 4. 4. Traite le refus serveur et les résultats incertains — Le serveur doit valider indépendamment. Relie un refus propre à un champ à ce champ ; présente une panne du service au niveau du formulaire avec une action de reprise. Ne marque pas tous les champs invalides parce que le réseau est coupé. Conserve les valeurs non sensibles et explique toute valeur sensible à ressaisir. - 5. 5. Exécute le scénario de reprise — Dans l’environnement de test, envoie un formulaire vide, puis un e-mail mal formé, puis une valeur apparemment valide refusée par le serveur. Suis les liens du résumé au clavier, corrige une erreur et vérifie que les autres valeurs restent présentes. Simule une panne, rétablis le service et termine un enregistrement réussi. - 6. Vérifie la reprise après une deuxième erreur — Saisis un nom valide et un e-mail incorrect, envoie puis corrige seulement l’e-mail. Si un autre champ est refusé, son message doit le nommer et expliquer la correction. Suis le lien d’erreur au clavier et vérifie que le nom valide reste présent. ## Critères d’acceptation — Preuves à conserver - L’erreur explique une correction et reste associée au champ. - La reprise au clavier conserve les valeurs valides et atteint un succès confirmé. - Refus serveur, panne et enregistrement incertain ont des issues distinctes. - Chaque lien du résumé déplace le focus clavier vers le champ correspondant. - Un champ corrigé perd son erreur périmée sans effacer les autres valeurs. - L’envoi en cours empêche les doublons et expose un statut lisible. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
- Prérequis · Le contexte réel du projet : dépôt, documentation et contraintes existantes
Pourquoi ça marche
- Les étapes viennent d’un guide publié et sourcé, pas d’une improvisation.
- La checklist transforme le conseil en critères vérifiables.
- Le périmètre déclaré évite d’étendre le guide au-delà de ses preuves.
À essayer ensuite
Ancre le guide dans le projet
# Ancre le guide dans le projet ## Objectif Transforme les étapes appliquées en conventions durables du dépôt. ## Contrôles - Relie chaque décision prise à l’étape du guide qui la justifie. - Ajoute la checklist aux revues concernées. - Note les cas hors périmètre pour les guides voisins. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:e5ec0d7547b93f896572bce6d5be5e0df6b720444f31c9c051e2df0af926c8b9
Diagnostiquer un problème
Diagnostique un écart au guide « Erreurs de formulaire : expliquer, corriger et réessayer »
# Diagnostique une application ratée du guide « Erreurs de formulaire : expliquer, corriger et réessayer » ## Symptôme observé [DÉCRIS ICI LE SYMPTÔME] ## Contrôles observables - Rejoue les étapes dans l’ordre et note la première qui diverge : - 1. 1. Prépare un formulaire simple à tester — Relie chaque valeur refusée à une explication utile, conserve la saisie valide et propose un chemin clair pour renvoyer le formulaire. Une bordure rouge seule ne dit pas quoi corriger. - 2. 2. Explique l’erreur du champ — Utilise un label natif et un type de champ adapté, avec required ou les contraintes pertinentes. Explique le format avant l’envoi. Commence par valider à l’envoi ; si tu ajoutes une validation à la sortie du champ, évite d’interrompre une valeur inachevée à chaque frappe. - 3. 3. Rends les erreurs accessibles — Après un envoi refusé, affiche un résumé au-dessus du formulaire avec des liens vers les champs concernés. Choisis et teste une stratégie : focus sur ce résumé, rendu focalisable par programme, pour plusieurs erreurs ; ou sur le premier champ invalide pour un formulaire court. Ne déplace pas le focus pendant la saisie normale. - 4. 4. Traite le refus serveur et les résultats incertains — Le serveur doit valider indépendamment. Relie un refus propre à un champ à ce champ ; présente une panne du service au niveau du formulaire avec une action de reprise. Ne marque pas tous les champs invalides parce que le réseau est coupé. Conserve les valeurs non sensibles et explique toute valeur sensible à ressaisir. - 5. 5. Exécute le scénario de reprise — Dans l’environnement de test, envoie un formulaire vide, puis un e-mail mal formé, puis une valeur apparemment valide refusée par le serveur. Suis les liens du résumé au clavier, corrige une erreur et vérifie que les autres valeurs restent présentes. Simule une panne, rétablis le service et termine un enregistrement réussi. - 6. Vérifie la reprise après une deuxième erreur — Saisis un nom valide et un e-mail incorrect, envoie puis corrige seulement l’e-mail. Si un autre champ est refusé, son message doit le nommer et expliquer la correction. Suis le lien d’erreur au clavier et vérifie que le nom valide reste présent. ## Causes possibles - Une étape a été sautée ou exécutée hors ordre. - Le besoin réel sort du périmètre du guide. - Un critère de la checklist n’a jamais été vérifié. ## Corrections bornées - Reprends uniquement l’étape divergente et ce qui en dépend. - Documente l’écart si le périmètre du guide ne couvre pas le besoin. ## Vérification finale — Preuves à conserver - L’erreur explique une correction et reste associée au champ. - La reprise au clavier conserve les valeurs valides et atteint un succès confirmé. - Refus serveur, panne et enregistrement incertain ont des issues distinctes. - Chaque lien du résumé déplace le focus clavier vers le champ correspondant. - Un champ corrigé perd son erreur périmée sans effacer les autres valeurs. - L’envoi en cours empêche les doublons et expose un statut lisible. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
- Prérequis · Le contexte réel du projet : dépôt, documentation et contraintes existantes
Pourquoi ça marche
- Le diagnostic rejoue des étapes ordonnées au lieu de chercher au hasard.
- Les corrections restent bornées à la première divergence réelle.
- La checklist sert de vérification finale reproductible.
À essayer ensuite
Préviens la prochaine dérive
# Préviens la prochaine dérive ## Objectif Fais de la première étape divergente un contrôle explicite du projet. ## Contrôles - Ajoute un contrôle ciblé sur l’étape qui a divergé. - Vérifie la checklist sur un second cas réel. - Documente la limite de périmètre rencontrée. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:8ee956cc0aa30fe4de6051e8e8cb6c103b543721be2e23467a399b5b929c14f9
Fiche complète, enregistrement et provenance
Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.
Digest du Pack: sha256:8c9f862f0d512d31a1de2db1e78f7a1f2f47ad63ab78fd260092c66b4d14bc14