Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

VALIDATION DES FORMULAIRES EN JAVASCRIPT

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 :

Le code de notre formulaire HTML

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.

Ajout d’un gestionnaire d’évènement sur le bouton d’envoi de notre formulaire

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 :

On vérifie en JavaScript que des données sont bien présentes dans notre formulaire HTML

Si le prénom est manquant, le formulaire ne s’envoie pas et un message d’erreur s’affiche

Essayer ce code !

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 :

  1. Empêcher l’envoi du formulaire avec preventDefault() ;
  2. 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 :

Utilisation des regex pour valider les données d’un formulaire en JavaScript

Essayer ce code !

Une petite explication de la regex ci-dessus s’impose. Nous allons la décortiquer partie par partie.

Première partie de notre regex

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… ».

Deuxième partie de notre regex

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 !

Chapitre précédent

Chapitre suivant