L’API de validation des contraintes

HTML5 a introduit la validation intégrée des formulaires au moyen d’attributs : required, type="email", type="number", min, max, pattern, minlength, maxlength. Le navigateur valide automatiquement lors de la soumission et affiche des messages d’erreur, sans nécessiter de JS.

:invalid correspond aux champs qui échouent à la validation ; :valid correspond à ceux qui la réussissent. :user-invalid (moderne) ne correspond aux champs qu’après une interaction de l’utilisateur, ce qui évite les bordures rouges sur un formulaire vierge. Stylez les erreurs avec ces pseudo-classes.

Chaque contrôle de formulaire expose une propriété validity — un objet ValidityState contenant des indicateurs booléens : valid, valueMissing, typeMismatch, patternMismatch, rangeUnderflow, tooShort, etc. Inspectez-le pour déterminer quelle erreur afficher.

input.checkValidity() renvoie true si la valeur respecte toutes les contraintes, et false dans le cas contraire. form.checkValidity() vérifie l’ensemble du formulaire. C’est utile pour effectuer des vérifications programmatiques avant une requête AJAX ou avant d’autoriser l’utilisateur à passer à l’étape suivante d’un parcours guidé.

input.reportValidity() se comporte comme checkValidity, mais déclenche en plus l’infobulle intégrée du navigateur et place le focus sur le premier champ invalide. Utilisez-le si vous souhaitez bénéficier gratuitement de l’interface utilisateur native ; utilisez checkValidity si vous voulez contrôler entièrement l’affichage des erreurs.

Les messages par défaut du navigateur (« Veuillez remplir ce champ ») peuvent ne pas correspondre à votre ton ou à votre langue. Remplacez-les avec input.setCustomValidity("Enter a valid coupon code"). Le champ devient invalide jusqu’à ce que vous supprimiez le message avec setCustomValidity("").

Ajoutez novalidate au formulaire pour supprimer le comportement de validation par défaut du navigateur. C’est utile lorsque vous implémentez un affichage entièrement personnalisé des erreurs ; le formulaire est tout de même soumis, qu’il respecte ou non les contraintes de validation. Effectuez donc une vérification programmatique avant la soumission.

Chaque contrôle déclenche un événement invalid lorsque la validation échoue. Écoutez cet événement pour supprimer l’infobulle par défaut et afficher un message personnalisé : input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input); }).

L’attribut pattern contient une expression régulière JavaScript à laquelle la valeur doit correspondre entièrement (il n’est pas nécessaire d’utiliser les ancres ^ et $ : elles sont implicites). Associez-le à l’attribut title pour décrire le format attendu aux utilisateurs.

La validation HTML facilite l’utilisation pour les utilisateurs ; toute personne modifiant le DOM peut la contourner. Effectuez toujours une nouvelle validation côté serveur. Les contraintes HTML servent à améliorer l’expérience utilisateur (retour immédiat, moins d’allers-retours), et non à assurer la sécurité.

Les contraintes se cumulent : <input type="number" min="18" max="120" required step="1"> doit être renseigné et contenir un entier compris entre 18 et 120. Le navigateur indique, grâce aux indicateurs ValidityState, quelle contrainte précise a échoué afin que vous puissiez afficher le message approprié.

Quelle est la différence entre la pseudo-classe CSS :user-invalid et :invalid ?

Les attributs de validation natifs (required, type, pattern, min, max) et l’API ValidityState fournissent une validation côté client puissante, sans JS par défaut. CSS :user-invalid met les erreurs en forme après une interaction. checkValidity/reportValidity permettent d’effectuer des vérifications programmatiques. setCustomValidity remplace les messages par défaut. Effectuez toujours une nouvelle validation côté serveur.