Validation intégrée et erreurs UX

1) Principes

1. Aide prédictive, pas punition. Nous montrons comment entrer correctement, avant l'erreur.
2. Ne pas perdre de données. Toute erreur ne détruit pas ce que vous avez saisi ; Nous soutenons Annuler/Répéter.
3. Le moment du défilé.

Avant d'entrer : helper text (règles et exemples).
Pendant : hints doux/masque/auto-sélection.
Après (blur/submit) : erreur claire avec l'instruction « comment réparer ».
4. Des économies d'attention. Un message est une raison et une action.
5. Disponibilité. Texte + icône/couleur, lien avec le champ via ARIA, mise au point vers le premier champ erroné.

2) Couches de validation

Client synchrone : format, longueur, obligatoire, masque. Rapide et bon marché.
Client asynchrone : identifiant unique, vérification BIN/IBAN, conseils API. Avec les déboires.
Serveur : règles commerciales, limites, risque-scoring, autorisation/droits. La vérité de dernier recours.
Règle : même avec une vérification client parfaite, le serveur confirme et produit le texte final.

3) Timings et débonds

Validation sur blur → fidbek instantané ≤ 100 ms.
La vérification asynchrone est une débauche de 250 à 400 ms après l'arrêt de l'entrée.
La preuve de succès est une icône concise (« Ok ») ou verte ; pas de « feux d'artifice ».
Sur 'submit', nous affichons la liste des erreurs et transférons le focus au premier.

js const debounce = (fn, ms=300)=>{let t;return (...a)=>{clearTimeout(t);t=setTimeout(()=>fn(...a),ms)}}

4) Copie des erreurs

Modèle : la raison → comment réparer → alternative (le cas échéant).

Bon : "Le mot de passe est plus court que 8 caractères. Ajoutez d'autres caractères ou utilisez la phrase".
Bon : "IBAN n'a pas l'air bien. Vérifiez la longueur et les caractères : A-Z, 0-9".
C'est mauvais, « entrée erronée ».
Ne blâmez pas l'utilisateur ; éviter le jargon et les codes.
Dans les zones sensibles (paiements/CUS), on évite les détails révélateurs de sécurité.

5) Modèles d'affichage des messages

5. 1 Au champ (inline)

`aria-invalid="true"`, текст в `aria-describedby`.
Bref, précisément ; pas de longs paragraphes.
Couleur + icône, mais le sens est dans le texte.

5. 2 Sous le formulaire (résumé)

Liste toutes les erreurs avec les ancres aux champs.
Le bouton Aller à l'erreur/clic sur le point transfère le focus.

5. 3 En cours d'expédition

On bloque la pression répétée (state 'busy').
Avec un délai de 3-5 s - « En attente de confirmation »... avec une répétition sûre.

6) Masques, contes de fées auto et correcteurs

Les masques ne doivent pas gêner l'insertion/modification. Laissez entrer librement, normalisez sous le capot.
Sous-contes de fées : montrez des exemples de formats, placeholder comme un conseil, pas une partie « obligatoire ».
Normalisation : Trimming des espaces, unification des registres, format automatique (par exemple, '+ 1 (___) ___ - ____') - mais conservez la version « propre » dans les données d'origine.

7) Accessibilité (A11y)

Lien : 'label' ↔ 'input', erreurs dans 'aria-describedby'.
Les critiques sont 'role = « alert », les informations sont' role = « status ».
On retourne le focus au champ erroné, ': focus-visible'vu.
Contraste texte/icônes ≥ AA ; le sens ne dépend pas seulement de la couleur.

html
<label for="email">Email</label>
<input id="email" name="email" aria-describedby="email-help email-err">
<small id="email-help">Например: user@domain.tld</small>
<p id="email-err" class="field-error" role="alert" hidden>Проверьте формат email</p>

8) Formats internationaux et localisation

Noms/adresses : admettez différents alphabets, longueurs, apostrophes, traits d'union.
Dates/devises/numéros : utilisez des formats de saisie locaux et des structures de stockage internes strictes (ISO/nombre de cents).
Téléphone : entrée dans le format international « + CC », un conte de fées auto par pays.
Langue des messages : courte, culturellement neutre ; Placez + 20-30 % de la longueur de la ligne.

9) Sécurité et vie privée

Ne montrez pas que le compte existe/n'existe pas - texte général : « Si l'email est enregistré, nous enverrons un email ».
Masquer les données sensibles (PAN, passeport).
Pour les étapes critiques (pari/paiement), utilisez l'idempotence et les « répétitions sécurisées ».
Logs - avec ID de corrélation sans PII dans les messages.

10) Préserver les progrès

Affiche automatiquement le brouillon (localement/sur le serveur).
En cas d'erreur d'envoi, le formulaire reste rempli ; une répétition est proposée plus tard.
Pour les processus multi-flux (KYC) : Enregistrez les étapes terminées.

11) Validation asynchrone

Debouns 250-400 ms ; on montre « on vérifie »... près du champ sans bloquer tout l'écran.
Une indication claire de succès/échec sans « coups » de mise en page.
Le délai du réseau → "Impossible de vérifier. Continuer avec le risque ?" (si autorisé) ou « Refaire ».

js const checkUsername = debounce(async (v)=>{
state.usernameChecking = true;
const ok = await api.unique('username', v).catch(()=>null);
state.usernameChecking = false;
state.usernameValid = ok === true;
}, 300);

12) Formulaires de paiement et KYC (spécifique)

Cartes : format PAN, durée, CVC - validation au fur et à mesure ; erreurs - sans révéler la raison du rejet par la banque.
A2A/portefeuilles : vérification de la recevabilité par pays/limites, textes clairs sur les commissions/délais.
KYC : exigences étape par étape pour les photos/documents, pré-projection, taille/type de fichier, délais de vérification, confidentialité.
Jeu responsable : les messages sont neutres, avec les actions « Fixer une limite « /« Aider ».

13) Anti-modèles

Affiche les erreurs « par symbole » sans débonser.
Réinitialiser le formulaire en cas d'erreur.
Message Saisie incorrecte sans spécifier de champ/règle.
Informations critiques uniquement par couleur/icône.
Verrouille toute la page pour vérifier un champ.
Absence de mode hors ligne et de répétitions en cas de défaillance du réseau.

14) Tokens de système de conception (exemple)

json
{
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100,
"asyncTimeoutMs": 5000,
"summaryMaxItems": 6
},
"a11y": {
"useAriaDescribedby": true,
"errorRole": "alert",
"statusRole": "status"
},
"visual": {
"fieldGap": 8,
"iconSize": 16,
"borderRadius": 10
}
}

15) Snippets de mise en œuvre

js const rules = {
email: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)          "Проверьте формат email"
};
async function validateEmail(v){
const fmt = rules.email(v);
if (fmt!== true) return fmt;
try {
const r = await fetch(`/api/email/check?v=${encodeURIComponent(v)}`);
const { allowed } = await r.json();
return allowed? true: "Этот email недоступен. Выберите другой.";
} catch {
return "Не удалось проверить. Повторите позже.";
}
}

ts function focusFirstError() {
const err = document.querySelector('[aria-invalid="true"]');
if (err) err.focus({ preventScroll:false });
}

js const saveDraft = debounce(form => localStorage.setItem('draft', JSON.stringify(Object.fromEntries(new FormData(form)))), 500);
form.addEventListener('input', ()=>saveDraft(form));

16) Métriques et contrôles

Time-to-Fix (temps de l'erreur à la correction).
Taux d'erreur par champ et par raison (format/limites/serveur).
Retransmission (retry success rate).
Proportion de formes abandonnées et profondeur de l'étape.
Remplissage en indices : CTR « More », taux de masquage des indices.

17) Liste de vérification QA

A11y

• Le focus passe au premier champ erroné ; 'aria-describedby '/' aria-invalid' sont exposés.
• Contraste ≥ AA ; les messages ne dépendent pas seulement de la couleur.

Comportement

• Validation intégrée avec débauche ; les erreurs n'apparaissent pas avant blur (sauf les masques critiques).
• Un résumé est généré sur submit, les champs ne sont pas nettoyés.
• Les vérifications asynchrones ne bloquent pas la page ; il y a une temporisation et une répétition.

Texte

• Raison + comment corriger ; pas de codes/faute.
• La localisation ne brise pas la mise en page ; les exemples sont pertinents.

Sécurité

• Aucune fuite de PII dans les communications ; ne révélons pas l'existence d'un compte.
• Idempotence pour les opérations critiques.

18) Documentation dans le système de conception

Composants : 'FieldError', 'FormSummary', 'HelperText', 'BusyButton'.
Cartes de règles pour les champs types (email, téléphone, mot de passe, adresse, IBAN, date).
Hydes par debouns, vérification asynchrone et comportement hors ligne.
Modèles de texte pour les erreurs fréquentes et exemples « avant/après ».

Résumé succinct

La validation intégrée est une aide prédictive, des instructions claires et une attitude prudente à l'égard des données. Vérifiez en local et sur le serveur, montrez les erreurs au bon moment avec des actions spécifiques, respectez la disponibilité et la confidentialité, conservez la progression et utilisez les déboires. C'est ainsi que les formes deviennent amicales et les erreurs rapides et réparables.