Rappels sur les formulaires HTML
Utilité d’un formulaire HTML
Les formulaires vont nous servir à recevoir des données envoyées par les utilisateurs.
Par exemple, lors de la création d’un compte client, nous utiliserons un formulaire pour récupérer les différentes informations relatives au client (nom, prénom, adresse, etc.).
On peut également utiliser les formulaires pour créer des formulaires de contact.
Pour rappel, les formulaires vont être écrits en HTML (et mis en forme en CSS), puis les informations envoyées vont être analysées et / ou stockées par d’autres langages comme le PhP ou MySQL.
Squelette d’un formulaire HTML
Pour créer le squelette notre formulaire en HTML, il nous faut déjà préciser un élément form qui va définir le formulaire en soi.
Nous devons également donner deux attributs à l’élément form : les attributs method et action.
L’attribut method va nous permettre de choisir la méthode d’envoi des données (post ou get), tandis que l’attribut action va être indispensable pour préciser la page qui doit effectuer le traitement des données.
Ensuite, pour créer notre formulaire en soi, nous avons à notre disposition différents éléments et de nombreux attributs.
L’élément que nous utiliserons majoritairement est l’élément input. L’attribut type de cet élément va nous permettre de modifier la forme du champ de formulaire créé en précisant le type de données que doit recevoir le champ à priori.
Création d’un formulaire simple en HTML
Le but de cette partie n’est pas de vous réapprendre à créer un formulaire en HTML, mais de voir en quoi le JavaScript peut nous aider avec nos formulaires HTML.
Nous nous contenterons donc d’un formulaire très simple en HTML, demandant seulement à l’utilisateur son prénom, numéro de téléphone et adresse mail.
Voici le code correspondant à ce formulaire :
Utilisation du JavaScript pour valider les données
Le JavaScript va nous être un bon moyen d’effectuer une validation puissante des données utilisateurs côté client.
En effet, ce langage possède des propriétés spécialement créées pour la validation d’éléments de formulaire et va nous permettre également d’utiliser nos regex avec nos champs de formulaire.
Le JavaScript va effectuer des vérifications avant l’envoi des données sur serveur, c’est-à-dire côté client.
Notez bien que cela ne vous dispense en aucun cas d’effectuer également des vérifications de l’intégrité des données côté serveur (en PhP par exemple).
En effet, rien n’empêche un utilisateur de désactiver le JavaScript sur son navigateur et cela pourrait alors poser des problèmes si vous ne validez pas les données côté serveur.
Ainsi, le JavaScript sera utilisé pour avertir les utilisateurs bienveillants d’un oubli ou d’une erreur lors du remplissage d’un formulaire en direct plus que pour empêcher des utilisateurs malveillants d’exploiter nos formulaires.
La JavaScript est intéressant au sens où l’on peut effectuer des tests poussés et vérifier et informer un utilisateur en direct de la validité d’un champ ou non.
Exemple de validation en JavaScript : le champ « prenom »
Voici le code de notre formulaire créé dans les parties précédentes :
Nous allons déjà vérifier la pertinence des données renseignées dans le champ « prenom » de ce formulaire.
Nous allons vouloir vérifier différentes choses :
- Le champ n’est pas vide ;
- Le champ ne contient que des lettres (accentuées ou pas), des tirets et des espaces (pour gérer les prénoms composés) ;
- Le champ contient entre 2 et 30 caractères.
Nous allons également vouloir afficher un message d’erreur lorsque le champ n’est pas (bien) rempli avec une indication sur l’erreur rencontrée.
Vérifier la présence d’une valeur
Pour simplifier un peu notre script final, nous allons effectuer les vérifications des données lors du clic sur le bouton « Valider » de notre formulaire, c’est-à-dire lorsque l’utilisateur tente d’envoyer le formulaire.
Si un champ est vide, le formulaire ne doit pas être envoyé et un message d’erreur doit être affiché là où la valeur est manquante.
Pour faire cela, nous allons donc déjà devoir créer un gestionnaire d’évènement click contenant notre fonction de validation.
Je vous conseille de rajouter un id à votre input type="submit" afin de pouvoir y accéder plus facilement.
Ensuite, pour vérifier la présence de données en soi, nous allons utiliser la propriété validity de l’objet Element.
Cette propriété contient elle même différentes propriétés permettant de vérifier des données et qui vont renvoyer un booléen.
Pour vérifier qu’un champ n’est pas vide, nous allons utiliser la propriété valueMissing, qui renvoie true si un champ possédant un attribut required est vide.
Dans le cas où valueMissing renvoie true, nous allons donc bloquer l’envoi du formulaire et renvoyer un message d’erreur.
Pour bloquer l’envoi du formulaire, nous allons utiliser la méthode preventDefault() si aucune valeur n’est envoyée.
Pour rappel, preventDefault() est une méthode de l’objet Event qui va annuler le déclenchemnt d’un évènement si celui-ci est annulable.
Finalement, nous allons vouloir afficher un message décrivant l’erreur à côté du champ. Pour cela, nous allons rajouter un élément span avec un id dans notre formulaire.
Nous allons ensuite utiliser la propriété textContent pour afficher l’erreur.
Voici donc le code auquel vous devriez arriver :
Dans le code ci-dessus, si le champ prénom est vide, alors valueMissing renvoie true et on exécute le code dans le if, à savoir :
- Empêcher l’envoi du formulaire avec
preventDefault(); - Créer et afficher un message d’erreur.
Vérifier la qualité des données envoyées
La première partie du travail est faite pour notre champ prénom. Maintenant, nous voulons également vérifier que l’utilisateur n’envoie pas n’importe quoi.
Nous n’allons autoriser que les lettres, les apostrophes, les tirets et les espaces pour ce champ.
De plus, nous n’autoriserons l’utilisation de majuscule qu’en début de mot et nous n’autoriserons pas les tirets en début ou en fin de chaîne.
La meilleure façon de faire tout cela est, vous l’avez certainement deviné, d’utiliser les expressions régulières.
J’espère que vous êtes prêts pour une regex assez complexe :
Une petite explication de la regex ci-dessus s’impose. Nous allons la décortiquer partie par partie.
Dans la première partie (partie surlignée en plus clair ci-dessus), nous demandons tout simplement à l’utilisateur de commencer soit par une lettre non accentuée en majuscule ou en minuscule, soit par l’un des caractères suivants : « éèîïÉÈÎÏ ».
On demande ensuite que cette première lettre soit suivie par au moins une autre lettre en minuscule ou par l’un des caractères suivants : « éèêàçîï ». Notez l’utilisation du signe + pour demander « au moins une autre… ».
La deuxième partie de notre regex concerne le second prénom (dans le cas d’un prénom composé par exemple, ou d’un prénom contenant un apostrophe).
Ce second prénom doit être facultatif. Nous avons donc utilisé le signe ? sur toute cette partie en l’entourant au préalable par des parenthèses pour faire porter le point d’interrogation sur toute la partie de la regex.
Cette deuxième partie commence soit par un apostrophe, un tiret ou un espace \s, puis se poursuit par le deuxième prénom en soi (on réutilise la première partie de la regex ici).
Si vous vous posez des questions sur la pertinence de cette regex, gardez bien à l’esprit qu’aucune regex n’est jamais parfaite.
Par exemple, cette regex va accepter des prénoms comme « Pç » et refuser les prénoms commençant par un « Ê » par exemple.
Tout dépend du niveau de restriction que vous souhaitez appliquer à votre champ. Dans mon cas, je voulais une regex pas trop complexe qui éliminerait la majorité des données incohérentes tout en acceptant tous les prénoms communs.
Notez encore une fois qu’une regex n’est jamais qu’un compromis entre ce qu’on souhaite accepter et ce qu’on veut refuser : plus votre regex va être stricte, plus vous risquez de refuser des données à priori « bonnes ».
Quoiqu’il en soit, la validation de notre champ prénom est désormais terminée, n’hésitez pas à essayer ce script ou à le compléter selon vos besoins !
