Validation des formulaires

Ceci est une ancienne révision du document !

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 :