forms-validation

Validation des Formulaires ✅

C'est le rôle de développeur front-end d'assurer le format correct des données soumises par un utilisateur via un formulaire. Nous parlons ici de la validation côté client (client-side validation). La validation client-side s'ajoute à la validation côté serveur (server-side validation). Elle n'est pas pourtant moins importante et ne devrait pas être négligée. Un des avantages est le feedback instantané envoyé à l'utilisateur sur ses saisies. C'est absolument nécessaire dans le contexte de bonne expérience utilisateur.

Avec l'arrivée de HTML5 nous avons la validation "nativement" disponible dans le navigateur 🎉. Nous pouvons spécifier le format souhaité grâce aux attributs HTML. L'élément form bloquera l'envoi des données si les formats ne sont pas respectés.

L'utilisation de la validation "native"

Nous avons à notre disposition :

• l'attribut type pour les contrôles input qui impose le format (par exemple <input type="email"> impose le format d'adresse mail correcte)

<label for="mail">Votre adresse e-mail</label>
<input id="mail" name="mail" type="email" placeholder="ex. mr@alyra.fr" />

• l'attribut required qui indique que le champ doit être rempli

<label for="mail">Votre adresse e-mail</label>
<input
  id="mail"
  name="mail"
  type="email"
  placeholder="ex. mr@alyra.fr"
  required
/>

• les attributs minlength et maxlength qui donnent des contraintes à la longueur des entrées textuelles

<label for="slug">Choisissez votre identifiant (entre 3 et 8 caractères)</label>
<input
  id="slug"
  name="slug"
  type="text"
  placeholder="ex. Alyra"
  minlength="3"
  maxlength="8"
/>

• les attributs min et max pour les entrées numériques

<label for="age">Votre âge</label>
<input id="age" name="age" type="number" value="20" min="18" />

• l'attribut pattern qui permet d'imposer un format en particulier. Nous pouvons utiliser cet attribut avec des contrôles input de type text, tel, email, url, password, et search.

Ici nous voulons récupérer un e-mail Alyra. Il est toujours en format prenom@alyra.fr

<label for="mail"
  >Votre adresse e-mail chez Alyra (uniquement les membres d'Alyra)</label
>
<input
  id="mail"
  name="mail"
  type="email"
  placeholder="ex. mr@alyra.fr"
  pattern="[a-z]{2,}@alyra.fr"
/>

<label for="slug"
  >Choisissez votre identifiant (entre 3 et 8 lettres en minuscule)</label
>
<input
  id="slug"
  name="slug"
  type="text"
  placeholder="ex. Alyra"
  pattern="[a-z]{3,8}"
/>

<label for="zip-code-pl">Votre code postal en Pologne (format xx-xxx)</label>
<input
  id="zip-code-pl"
  name="zip-code-pl"
  type="text"
  placeholder="50-306"
  pattern="[0-9]{2}-[0-9]{3}"
/>

ou

<label for="zip-code-pl">Votre code postal en Pologne (format xx-xxx)</label>
<input
  id="zip-code-pl"
  name="zip-code-pl"
  type="text"
  placeholder="50-306"
  pattern="/d{2}-/d{3}"
/>

Les symboles souvent utilisés dans l'attribut pattern

.	Caractère générique : correspond à tout caractère à l'exception de la nouvelle ligne (\n)
(a|b)	a ou b
[abc]	Un de (a ou b ou c)
[^abc]	Aucun de (a ou b ou c)
[a-q]	caractère dans la plage de a à q (minuscules)
[A-Q]	caractère dans la plage de A à Q (majuscules)
[0-7]	Chiffre entre 0 et 7
\d	chiffre décimal
\D	aractère autre qu’un chiffre décimal
\s	tout caractère espace blanc
\S	tout caractère autre qu’un espace blanc

*	0 ou plus
{3}	Exactement 3
+	1 ou plus
{3,}	3 ou plus
?	0 ou 1
{3,5}	3, 4 ou 5

Client-side validation avec JavaScript

Parfois les développeurs préfèrent de ne pas utiliser la validation "native". Il est important de savoir comment la désactiver. Nous ajoutons pour cela l'attribut novalidate à l'élément form.

<form novalidate>
  <!-- -->
</form>

---

Exercices

• Form Validation with pattern attribute