`reportValidity` et `setCustomValidity`

L’API de validation des contraintes expose deux méthodes qui contrôlent l’interface de validation intégrée du navigateur : reportValidity (afficher l’infobulle) et setCustomValidity (fournir un message d’erreur personnalisé). Ensemble, elles vous permettent de personnaliser les messages tout en conservant la présentation native.

checkValidity() renvoie silencieusement true ou false, sans effet sur l’interface. reportValidity() effectue la même vérification, mais place en plus le focus sur le premier champ invalide et affiche l’infobulle de validation du navigateur. Choisissez reportValidity si vous souhaitez bénéficier gratuitement de l’expérience utilisateur native.

Pour les parcours guidés à plusieurs étapes, validez les champs de chaque étape avant de passer à la suivante : if (step.reportValidity()) { next(); }. Le navigateur gère l’affichage des erreurs et le focus est placé sur le champ nécessitant votre attention, ce qui vous évite de réimplémenter la gestion du focus.

Les messages par défaut (« Veuillez remplir ce champ ») peuvent ne pas correspondre à votre ton. input.setCustomValidity("Username is required") remplace le message par défaut par votre texte. Le champ est considéré comme invalide jusqu’à ce que vous supprimiez le message.

input.setCustomValidity("") supprime le message personnalisé et réactive la validation normale. Appelez cette méthode chaque fois que vous effectuez une nouvelle validation ; sinon, d’anciens messages personnalisés subsisteront même après la résolution du problème par l’utilisateur.

Pour les vérifications côté serveur (unicité d’un nom d’utilisateur, validité d’un coupon), utilisez setCustomValidity après la réponse asynchrone : const ok = await checkUsername(value); input.setCustomValidity(ok ? "" : "Already taken");. Le navigateur prend immédiatement en compte le nouvel état de validité.

Pour utiliser votre propre affichage des erreurs tout en conservant le suivi de la validité, écoutez l’événement invalid et appelez e.preventDefault() afin de supprimer l’infobulle native : input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input, input.validationMessage); }).

setCustomValidity ne prend en charge qu’un seul message personnalisé à la fois. Pour appliquer plusieurs règles, vérifiez chacune d’elles et appelez setCustomValidity avec le message le plus pertinent, selon un ordre de priorité. La première règle qui échoue est celle qui est affichée.

Si vous définissez un message personnalisé pour un champ obligatoire vide, votre message et celui par défaut peuvent entrer en conflit. Choisissez une seule approche par champ : désactivez la contrainte intégrée (utilisez type="text" au lieu de type="email" et validez avec setCustomValidity), ou faites entièrement confiance à la validation intégrée.

Pour une validation entre plusieurs champs (par exemple, la confirmation d’un mot de passe), appliquez setCustomValidity au champ associé : confirmInput.setCustomValidity(confirmInput.value === passInput.value ? "" : "Passwords do not match"). Le formulaire reste invalide tant que les deux valeurs ne correspondent pas.

Les messages intégrés sont localisés par le navigateur selon la langue de l’utilisateur. Les messages personnalisés définis avec setCustomValidity doivent être rédigés par vos soins dans la bonne langue : lisez navigator.language ou votre propre état d’internationalisation, puis fournissez la traduction correspondante.

Ouvrez DevTools et essayez chaque parcours invalide : soumission vide, saisie partielle, format non conforme, échec asynchrone. Vérifiez que le message correct s’affiche, que sa correction le supprime et que la soumission d’un formulaire valide se poursuit. Les cas particuliers (collage d’un format invalide, remplissage automatique du navigateur) méritent des tests spécifiques.

Après avoir appelé input.setCustomValidity("Déjà utilisé"), comment indiquez-vous au navigateur que le champ est à nouveau valide ?

reportValidity déclenche l’interface de validation intégrée du navigateur (focus et infobulle), ce qui est idéal pour les vérifications programmatiques. setCustomValidity remplace les messages par défaut par votre texte ; supprimez-le avec une chaîne vide lorsque le champ redevient valide. Écoutez l’événement invalid avec preventDefault pour afficher les erreurs entièrement à votre manière. Utilisez ces mécanismes pour la validation entre champs, les vérifications asynchrones et les messages personnalisés localisés.