Validation des saisies

Aperçu : Validation des saisies

Pour aider les utilisateurs à éviter les erreurs, HTML5 définit une gamme de fonctionnalités intégrées pour valider les types communs de saisie, comme les adresses de courriel et les dates. Certains scripts peuvent être nécessaires à la validation lors de l’utilisation de commandes personnalisées ou à la prise en charge des anciens navigateurs. Dans ces situations, les notifications aux utilisateurs doivent être accessibles, comme décrit à la section Notifications aux utilisateurs.

Pour assurer la sécurité, les données doivent également être validées du côté client et du côté serveur.

La plupart des données d’utilisateurs peuvent être validées au moyen des attributs de validation des contrôles de formulaire HTML5. Voici les attributs de validation communs :

L'attribut required

Indique si un champ de formulaire doit être rempli avant que le formulaire puisse être soumis. Voir Validation des saisies requises.

L'attribut type

Précise le type de données. Voir Validation des types de saisie commune. .

L'attribut pattern

Précise une expression régulière qui définit un modèle que les données saisies doivent suivre. Voir Validation des saisies de structure.

L'attribut minlength et maxlength

Indique la longueur minimale et maximale des données textuelles. Voir Validation de la longueur des saisies.

L'attribut min et max

Indique les valeurs minimales et maximales des types de saisies numériques. Voir Validation de la longueur des saisies.

Si les règles spécifiées par les attributs de validation ne sont pas suivies, l’élément devient invalide et le navigateur bloque le formulaire et affiche un message d’erreur.

Validation des saisies requises

Identifiez les champs de formulaire requis à la fois visuellement dans l’étiquette et sémantiquement :

• Pour identifier visuellement les champs requis dans l’étiquette, ajoutez un astérisque (*) à l’étiquette et définissez l’astérisque au-dessus du formulaire, ou ajoutez le mot « requis » entre parenthèses.
• Pour identifier sémantiquement les champs requis, ajoutez l’attribut required à la commande.

L’attribut required déclenche une validation côté client dans le navigateur. Les navigateurs Web actuels prennent en charge l’attribut et avisent l’utilisateur de toute entrée requise manquant au moyen d’une boîte de dialogue standard du navigateur Web. Ces dialogues respectent les paramètres et les préférences de l’utilisateur dans le navigateur et le système d’exploitation, comme la taille de police par défaut, les couleurs et la langue.

La présence de l’attribut required permet d’utiliser la pseudoclasse :required pour le style CSS. Si l'<input> requis n’a aucune valeur, il permet d’utiliser la pseudoclasse :invalid. Voir le bon exemple suivant.

<form method="post" action="script-here">
   <label for="org">Organisation (requis) </label> 
   <input type="text" id="org" required> 
   <input type="submit" value="Soumettre">
</form>

input:invalid { border: 2px dashed red; }
input:required { background-color: pink; }

Validation des types de saisie communs

HTML5 introduit de nouveaux types de données input, notamment email, url, number, tel (téléphone), date et range. Les navigateurs Web modernes permettent la validation intégrée des erreurs du côté client pour ces nouveaux types de saisie. Par exemple, une adresse URL mal formée déclenche le navigateur pour afficher un dialogue avec le message « Veuillez entrer une adresse URL ».

Pour aider les utilisateurs à saisir des données plus facilement, HTML5 offre des commandes pour certains des nouveaux types de saisie, comme un sélecteur de date et des boutons de défilement pour augmenter ou réduire des chiffres. Par exemple, dans l’exemple ci-dessous, les navigateurs modernes affichent le champ de saisie « Numéro » avec des boutons pour augmenter ou réduire le nombre et affichent le champ de saisie « Plage » comme commande de défilement.

Les anciens navigateurs Web qui ne prennent pas en charge les nouveaux types de saisie affichent un champ de texte simple.

<form class="form-horizontal" role="form" method="get" action="#">
   <div class="form-group">
      <label for="email" class="col-sm-2 control-label">Courriel </label>
      <div class="col-sm-10">
         <input type="email" name="email" class="form-control" id="email">
      </div>
   </div>
   <div class="form-group">
      <label for="url" class="col-sm-2 control-label">Site Web </label>
      <div class="col-sm-10">
         <input type="url" name="url" class="form-control" id="url">
      </div>
   </div>
   <div class="form-group">
      <label for="number" class="col-sm-2 control-label">Numéro </label>
      <div class="col-sm-10">
         <input type="number" name="number" class="form-control" id="number" min="0" max="100" step="10" value="0">
      </div>
   </div>
   <div class="form-group">
      <label for="range" class="col-sm-2 control-label">Plage </label>
      <div class="col-sm-10">
         <input type="range" name="range" class="form-control" id="range" min="0" max="100" step="10" value="0">
      </div>
   </div>
   <div class="form-group">
      <label for="date" class="col-sm-2 control-label">Date </label>
      <div class="col-sm-10">
         <input type="date" name="date" class="form-control" id="date">
      </div>
   </div>
   <div class="form-group">
      <label for="time" class="col-sm-2 control-label">Heure</label>
      <div class="col-sm-10">
         <input type="time" name="time" class="form-control" id="time">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">Continue</button>
      </div>
   </div>
</form>

Validation des saisies structurées

L’attribut pattern offre une autre fonction utile de validation. Il faut une expression régulière (regex) comme valeur, qui est utilisée pour faire correspondre les combinaisons de caractères dans la saisie de texte. Regex est idéal pour la validation des formulaires puisqu’il associe des types particuliers de structures de données comme les numéros de téléphone, les codes postaux et les numéros de série.

Dans cet exemple, l’attribut pattern de l’élément <input> utilise regex pour définir un format particulier qui correspond aux caractères d’une plaque d’immatriculation de voiture de l’Ontario (émise depuis 1997). La structure se compose de quatre lettres, suivies d’une espace et de trois chiffres. Le modèle ne capturera pas les valeurs des plaques d'immatriculation personnalisées.

<div>
   <label for="license">Plaque d’immatriculation de l’Ontario (XXXX 999)</label>
   <input type="text" id="license" class="form-control" pattern="^[A-Z]{4}( )[0-9]{3}$"> 
</div>

Validation de la longueur des saisies

La longueur de caractères de tous les champs de texte créé par <input> ou <textarea> peut être limitée en utilisant les attributs minlength et maxlength. Un champ n’est pas valide si la valeur contient moins de caractères que la longueur minlength ou plus de caractères que la longueur maxlength.

Pour les champs numériques, les attributs min et max peuvent être utilisés pour fournir une plage de valeurs valides.

<form class="form-horizontal" role="form" method="get" action="#">
   <div class="form-group">
      <label for="choose" class="col-sm-2 control-label">Carotte ou orange? </label>
      <div class="col-sm-10">
         <input type="text" name="choose" class="form-control" id="choose" minlength="6" maxlength="6">
      </div>
   </div>
   <div class="form-group">
      <label for="range1" class="col-sm-2 control-label">Combien? </label>
      <div class="col-sm-10">
         <input type="number" class="form-control" name="range1" id="range1" min="1" max="10">
      </div>
   </div> 
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">Soumettre</button>
      </div>
   </div>
</form>

Tenir compte des différents formats de saisie

Lors de la conception de la validation pour les différents types de données, il faut tenir compte autant que possible des différents formats de saisie. Tenez compte de l’internationalisation et de la personnalisation. Soyez permissif quant au format de saisie. Par exemple, les codes postaux et les numéros de téléphone dans différents pays suivent des tendances différentes. Les plaques d’immatriculation peuvent être personnalisées. Votre formulaire sera plus facile à utiliser s’il peut interpréter plusieurs notations.

Avantages de la validation côté client

La validation côté client améliore l’expérience utilisateur. En repérant les données non valides du côté client, l’utilisateur peut corriger le problème immédiatement, plutôt que d’attendre un aller-retour au serveur pour recevoir un message d’erreur. Le caractère immédiat rend les erreurs de validation plus compréhensibles. La validation côté client peut également réduire la charge du réseau et du serveur. La validation côté client est cependant facile à contourner, de sorte que les utilisateurs malveillants peuvent facilement envoyer des données erronées à votre serveur. Pour cette raison, vous devriez toujours valider le côté serveur également.

Validation par l’utilisateur

Le fait de permettre à vos utilisateurs de vérifier et de corriger leurs saisies permet également de réduire les erreurs. Offrez cette fonction dans la mesure du possible, mais surtout lorsque les actions ont un caractère permanent, juridique, financier ou autrement critique, ou lorsque les données de l’utilisateur ne peuvent être vérifiées automatiquement.

Exiger la confirmation de l’utilisateur

Dans la mesure du possible, exigez la confirmation de l’utilisateur pour les actions irréversibles, comme la suppression permanente des données.

Par exemple :

• Une application de messagerie Web comportant une action Soumettre irréversible pour l’envoi de dizaines de courriels invite l’utilisateur à confirmer. La confirmation est mise en œuvre sous forme de fenêtre modale (voir Module 12), ce qui exige que l’utilisateur confirme l’action avant de continuer.
• Avant de passer une commande en ligne, l’utilisateur examine et confirme un sommaire des produits commandés ainsi que les adresses de livraison et de facturation.

Fonctionnalité d’annulation

Dans la mesure du possible, assurez-vous que les actions Soumettre sont réversibles.

Il existe plusieurs commandes d’interface utilisateur qui permettent habituellement aux gens de reculer à l’état précédent du système. Par exemple :

• Une option d’annulation permettra aux utilisateurs d’annuler les changements à un élément d’interface utilisateur.
• Un dossier « corbeille » qui restaure les fichiers supprimés.
• L’utilisation d’un lien Retour ramène les utilisateurs à une page ou à un écran précédents.
• Un bouton Annuler permet à l’utilisateur de quitter une tâche ou un processus en plusieurs étapes.
• Un bouton Fermer permet aux utilisateurs de fermer un affichage nouveau ou existant.

Ressources WCAG connexes