Validation des formulaires

La validation des formulaires permet de contrôler que les données saisies sont bien celles attendues (champs requis, formats, plages de données possibles…). Elle peut se faire :

Côté client : à partir des contrôles de validité HTML5 et Javascript
Côté serveur (variable en fonction du langage et de la technologie utilisée)

L'avantage d'une validation côté client est qu'elle évite d'envoyer vers le serveur des données invalides (ce qui sollicite inutilement le réseau et le serveur), et est assez déplaisant pour l'utilisateur.
La présence d'une validation côté client ne doit pas conduire le développeur à s'abstenir d'une validation côté serveur (pour des raisons de sécurité).

Contraindre la saisie se fait via l'attribut required sur les champs input :

<form>
  <label for="choose">Quel est votre animal de compagnie préféré ?</label>
  <input id="choose" name="i_like" required>
  <button>Valider</button>
</form>

L'attribut required existe sur tous les champs input, excepté ceux qui ont une valeur par défaut (color et range), et sur les select et textarea.

La vérification de contenu peut se faire avec l'attribut pattern qui prend en charge les expressions régulières.

Exemple : valeurs attendues : Chien ou chat

<form>
  <label for="choose">Quel est votre animal de compagnie préféré ?</label>
  <input id="choose" name="i_like" required pattern="[Cc]h(ien|at)">
  <button>Valider</button>
</form>

Quel est votre animal de compagnie préféré ?

Expressions régulières

Classes

Pattern	Description
[abc]	1 caractère parmi a, b ou c
[^abc]	1 caractère sauf a, b ou c
[a-z]	1 caractère dans la plage a..z
[a-z\|A-Z]	1 caractère dans la plage a..z ou A..Z
.	1 caractère quelconque
a\|b	a ou b
\s	Tout caractère blanc (espace, tabulation, nouvelle ligne, retour charriot)
\S	Tout caractère non blanc
\d	Tout chiffre
\D	Tout caractère excepté un chiffre
\w	Tout “word” caractère, équivalent à [a-zA-Z_0-9]
\W	Tout “non word” caractère, équivalent à [^a-zA-Z_0-9]
(?:...)	Match avec l'expression entre parenthèses
(...)	Capture l'expression entre parenthèses

Quantifieurs

Pattern	Description
a?	0 ou 1 a
a*	0 ou plusieurs a
a+	1 ou plusieurs a
a{3}	Exactement 3 a
a{3,}	3 a ou plus
a{3,6}	Entre 3 et 6 a

Ancres

Pattern	Description
^	Début de la chaîne
$	Fin de la chaîne

Testeur en ligne regex101

Personnalisation des messages

Il n'est pas possible de personnaliser l'apparence des messages par défaut, mais uniquement leur contenu, via javascript :

<form id="form-messages">
  <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label>
  <input type="email" id="mail" name="mail">
  <button>Envoyer</button>
</form>

let email=document.getElementById("mail");
email.addEventListener("change", function (event) {
  if(email.validity.typeMismatch) {
    email.setCustomValidity("Cet email n'en est pas un !");
  } else {
    email.setCustomValidity("");
  }
});

Il est maintenant possible d'utiliser l'api de validation de contraintes HTML5, supportée par la plupart des navigateurs :

Propriété	Rôle	Si true	Si false
validationMessage	Retourne le message de validation retourné par l'élément, prenant en compte les contraintes non satisfaites (en lecture seule)
validity.customError	renvoie true si l'élément a un message d'erreur personnalisé
validity.patternMismatch	renvoie true si la valeur de l'élément ne respecte pas le pattern fourni	:invalid
validity.rangeOverflow	renvoie true si la valeur de l'élément est supérieure au max défini	:invalid, :out-of-range
validity.rangeUnderflow	renvoie true si la valeur de l'élément est inférieure au min défini	:invalid, :out-of-range
validity.tooLong	renvoie true si la taille de l'élément est supérieure à celle définie	:invalid, :out-of-range
validity.typeMismatch	renvoie true si la valeur saisie a une incohérence de type avec celui attendu	:invalid
validity.valid	renvoie true si l'élément passe tous les contrôles de validité	:valid	:invalid
validity.valueMissing	renvoie true si un élément requis n'a pas de valeur	:invalid
willValidate	Renvoie true si l'élément est validé lors du submit

Méthode	Rôle
checkValidity()	Renvoie true si la valeur de l'élément passe la validation
setCustomValidity(message)	Défini un message de validation personnalisé

Formulaire HTML

L'attribut novalidate du form désactive la validation HTML5 par défaut.

<form novalidate>
  <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label>
  <input type="email" id="mail" name="mail">
  <button>Envoyer</button>
  <div class="error"></div>
</form>

Feuille de style CSS

.message {
  color: white;
  border-radius: 4px;
  padding: 8px;
  display: none;
  margin-top: 10px;
}
.message.error {
  background-color: #db4764;
  display: block;
}
.message.valid {
  background-color: green;
  display: block;  
}

Validation Javascript

let form=document.querySelector("form");
let mail=document.getElementById("mail");
let message=document.querySelector('.message');

form.addEventListener("submit", function (event) {
  event.preventDefault();
  let m=mail.value;
  if (!mail.validity.valid) {
    message.innerHTML = mymail.validationMessage;
    message.className = "message error";
  } else {
    message.innerHTML=`'${m}' est valide !`;
    message.className = "message valid";
  }
});
mail.addEventListener("input", function (event) {
  if (mail.validity.valid) {
    message.innerHTML = "";
    message.className = "message";
  }
});