Personnaliser les messages d'erreur d'un formulaire

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).

<form class=exemple-pattern-css>
<label>Votre nom* :</label>
<input type=text pattern="^[( )a-zA-Z]+$">
<span>Veuillez entrer uniquement des lettres</span>
</form>

.exemple-pattern-css input:invalid{
	
border:1px solid red;
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97);
transform: translate3d(0, 0, 0)
	}
	
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.exemple-pattern-css span{
	
opacity:0; 
visibility:hidden;
	
	}
	
.exemple-pattern-css input:invalid ~ span { 
	
display:flex;
color:red; 
transition:.4s opacity linear
	
	}
	
.exemple-pattern-css input:invalid ~ span {
	
	visibility:visible;
	opacity:1
	
	}

Autre exemple en CSS ^EN

Mise en place avec JavaScript :

<form>
<label>Votre adresse e-mail :</label> 
<input class=exemple type="email" required>
<button type="submit">OK</button>
</form>

(Code à placer en bas de page)

<script>
var email = document.querySelector('input.exemple');
email.oninvalid = function(e) {
	e.target.setCustomValidity("");
	if (!e.target.validity.valid) {
		if (e.target.value.length == 0) {
e.target.setCustomValidity("Ce champ est obligatoire");
		} else {
e.target.setCustomValidity("Entrez une adresse valide. Exemple : contact@nom.com");
		}
	}
};
</script>

Source, inspiration, ressources :

Article custom css placeholder ^(EN) .

Source originale méthode CSS ^(EN) .

Exemple plus complet avec méthode CSS ^(EN) .

Compatibilité navigateurs pour les éléments de formulaire HTML5 ^(EN) .