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 HTML ET LIMITATIONS

Le problème des données utilisateurs

Dans la partie précédente, nous avons créé un formulaire simple en HTML demandant à nos visiteurs leur prénom, adresse email et numéro de téléphone.

Cependant, rien n’empêche ces utilisateurs d’envoyer le formulaire sans avoir rempli certains champs ou encore en ayant donné des informations erronées.

En effet, dans le champ demandant le numéro de téléphone par exemple, rien n’empêche un utilisateur d’écrire « Elle est où Jeanne ? » à la place de son numéro et d’envoyer le formulaire comme cela.

Cela nous mène au point central concernant les formulaires : vous devez toujours vérifier la structure des données envoyées.

Evidemment, un utilisateur pourra toujours nous envoyer un faux numéro de téléphone, mais nous allons pouvoir le « forcer » à renseigner quelque chose ayant la forme d’un numéro de téléphone (c’est-à-dire 10 chiffres consécutifs sans espace par exemple) dans le champ correspondant.

Une première validation en HTML

Le HTML possède déjà des attributs nous permettant de placer nos premières contraintes sur notre formulaire.

Tout d’abord, nous avons l’attribut required, qui va rendre obligatoire le remplissage d’un champ.

Nous disposons également des attributs minlength et maxlength qui vont nous permettre de définir la taille d’un champ input type="text" et des attributs min et max pour les input type="number" et input type="date".

Utilisation de required et maxlength

Si le champ n’est pas rempli, le formulaire ne s’enverra pas

Cette première validation est un début, cependant elle va être loin d’être suffisante pour trois raisons.

La première est qu’elle n’est pas assez poussée et est loin d'être complète.

La deuxième est que certains attributs ne sont pas supportés par tous les navigateurs.

C’est pas exemple le cas pour l’attribut required qui n’est toujours pas supporté par Safari entre autres.

Finalement, rien n'empêche un utilisateur de neutraliser les attributs HTML en affichant le code source de la page et en les enlevant tout simplement avant d'envoyer le formulaire.

De même, les validations automatiques proposées par certains bons navigateurs comme Chrome par exemple ne sont pas suffisantes.

Effectivement, Chrome (entre autres) va reconnaître certains input type= et forcer la mise en forme de certaines données, comme les données de type mail par exemple.

Chrome vérifie que les données envoyées correspondent au type d’input

Cependant, une nouvelle fois, tous les navigateurs n’effectuent pas les mêmes vérifications et nous allons donc devoir les faire nous mêmes en amont.

Chapitre précédent

Chapitre suivant