Guide pratique · IA & interfaces
7 min de lecture
Mis à jour le
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.
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.
À 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
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.
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. ## 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:132bb1bf788eff279ae23c5802706c615b8d56e38b25006d40df4ebeb2ea74f1
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. ## 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:742d5150c0724cd186a2f202d092d09db24446a94e7ceed5f08bd5172f1eb3a1
Digest du Pack: sha256:9b683b58b5ba0ecbfb37ab8f92d23c5970c5aafdc463a4201052e151c3f8cf24