La validation de formulaire avec HTML5
La validation de formulaire avec HTML5
-
Objectifs
- Connaître quelques attributs HTML pour valider un formulaire
-
Introduction
- HTML5 introduit de nombreuses nouveautés pour les formulaires pour améliorer l’aide à la saisie et les contrôles disponibles pour l’utilisateur.
- Dans ce tutoriel je vais vous montrer les principaux attributs
HTMLpermettant de valider les données. -
Les attributs
-
required
- L’attribut «
required» permet de rendre obligatoire le remplissage d’un champ et bloquer la validation du formulaire si l’un des champs (concernés par cet attribut) n’a pas été renseigné. - Lorsqu’il est présent, cet attribut spécifie qu’un champ de saisie doit être rempli avant de soumettre le formulaire.
- L’attribut
requiredassure que le champs de saisie ne peut pas être laissée vide. - Si l’utilisateur a cliqué sur le bouton de soumission de formulaire alors qu’un champ requis est vide, la soumission du formulaire n’aura pas lieu et un message sera automatiquement affiché
- Cet attribut n’a pas besoin de valeur car sa seule présence suffit, cependant les syntaxes suivantes sont admises :
<input type="text" required><input type="text" required="required">-
placeholder
- L’attribut
placeholderpeut être placé sur les éléments :<input>: de typetext, search, password, url, tel, email <textarea> placeholderest un attribut qui permet de renseigner un texte indicatif par défaut dans un champ de formulaire.- C’est une valeur qui s’efface dès que l’utilisateur active le champ de formulaire.
- Ici on a utilisé l’attribut
placeholderpour ajouter un texte indicatif par défaut dans un champ de formulaire. - L’attribut
placeholderpeut être placé sur les éléments : - <input> : de type text, search, password, url, tel, email
- <textarea>
-
pattern
- L’attribut
patternpermet de valider le format attendu à l’aide d’une expression régulière. Un message sera affiché si l’information entrée est erronée. - À l’aide de l’attribut
pattern, vous pouvez déclarer vos propres exigences de validation à l’aide d’expressions régulières. - Cet attribut vous permet d’ajouter une validation de base sans recourir à JavaScript.
- Des patterns par défaut existent pour certains types de champ, comme les champs de type email ou url par exemple, qui attendent des formats spécifiques.
- Une
expression régulièreest une chaîne formalisée de caractères définissant un motif. Par exemple, [a-zA-Z0-9]+un motif qui correspond à une chaîne de n’importe quelle longueur, à condition que la chaîne ne contienne que des lettres minuscules ( a-z), des lettres majuscules ( A-Z) ou des nombres ( 0-9). - Les expressions régulières, ou plus communément regex (contraction de regular expression) permettent de représenter des modèles de chaînes de caractère.
- HTML5 a introduit un certain nombre de nouvelles fonctionnalités de validation de formulaire. Cependant, vous devez considérer ces éléments comme particulièrement utiles pour l’utilisateur et rappelez-vous qu’ils ne fournissent aucune sécurité contre les entrées de formulaire incorrectes ou malveillantes.
Il est très facile de contourner un formulaire HTML frontal et de simplement envoyer des données de formulaire falsifiées directement au serveur. Cela signifie que toutes vos procédures de validation de formulaire, ainsi qu'une vérification de l'assainissement et de la sécurité, devront être répétées sur le serveur, afin d'éviter toute anomalie .-
Activités
- Créer un champ qui attend une valeur numérique d’au moins 5 chiffres précédés d’une lettre majuscule comprise entre A et F. Si le format n’est pas respecté, le navigateur doit informer l’utilisateur.
- <input type= »text » pattern= »[A-F][0-9]{5} »>
- Créer un champ qui attend une valeur numérique d’au moins 5 chiffres précédés de deux lettres majuscules comprises entre A et F. Si le format n’est pas respecté, le navigateur doit informer l’utilisateur.
- <input type= »text » pattern= »[A-F]{2}[0-9]{5} »>
- Créer un champ de saisie qui ne peut contenir que trois lettres (pas de chiffres ni de caractères spéciaux)
- <input type= »text » pattern= »[A-Za-z]{3} »>
- Créer un champ qui attend une valeur composé que de lettres minuscules; pas de majuscules, de chiffres ou d’autres caractères spéciaux autorisés. De plus, la longueur de la valeur ne doit pas dépasser 15 caractères.
- <input type= »text » pattern= »[a-z]{1,15} »>
- Créer un champ de type = « mot de passe » qui doit contenir au moins 8 caractères.
- <input type= »text » pattern= ».{8,} »>
- Créer un champ de type = « mot de passe » qui doit contenir au moins 8 caractères d’au moins un chiffre et une lettre majuscule et minuscule.
- <input type= »text » pattern= »(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,} »>
