Personnaliser les messages d'erreur d'un formulaire
Dernière mise à jour : mai 2022
Introduction
HTML5 a apporté son lot de nouveautés en ce qui concerne les éléments de formulaire, avec notamment les zones de saisie enrichies. Là où HTML4 affichait des input avec une simple saisie sans aucune indication, il est désormais possible avec HTML5 de proposer des champs spécifiques avec des actions bien précises.
Comme il ne sera pas question d'aborder ici en profondeur ces nouveautés, vous pouvez découvrir les éléments de formulaire HTML5 sur ce blog. En effet, dans ce court tutoriel, nous allons voir comment styler les messages d'erreur dans un formulaire HTML5 avec CSS dans un premier temps, puis dans un second temps avec JavaScript.
Mise en place en CSS
Dans l'exemple ci-dessous où l'on vous demande votre nom, nous allons utiliser un élément span qui contiendra un message d'erreur caché et qui apparaîtra si le champ est mal renseigné.
Entrez donc des chiffres pour voir le message d'erreur :
Rien de très compliqué dans cet exemple. On renseigne dans l'input un pattern qui, dès lors où l'on renseigne autre chose que des lettres, fait apparaître un message d'erreur (avec du CSS).
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis du tutoriel ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.