Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de JavaScript

Empêcher la soumission d'un formulaire

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à intercepter la soumission d'un formaulaire. Il s'agit de vérifier les données soumises et d'empêcher la soumission du formulaire, si les données ne sont pas correctes.

Transcription

Maintenant que nous savons réagir à des événements, nous allons utiliser le JavaScript pour améliorer l'expérience utilisateur. Et, l'un des premiers éléments d’interaction qui va grandement bénéficier des possibilités du JavaScript, eh bien ce sont les formulaires. Justement, j'ai un formulaire devant les yeux, complètement vide, vous le voyez, et je vais essayer de soumettre ce formulaire complètement vide et, non seulement il n'est pas soumis, mais en plus, vous voyez que j'ai un message d'erreur qui apparaît, ici, en rouge et qui me demande d'indiquer une adresse mail. Effectivement, si je reviens ici dans la partie supérieure du formulaire, je remarque que le champs « adresse e-mail » est resté vide, alors je vais mettre quelque chose dedans, « moi@masociete.net », par exemple, et je vais envoyer, de nouveau, ce formulaire. Là, tout fonctionne correctement, j'arrive même sur une autre page qui me dit : « Merci » et qui m'envoie ce petit message. Alors, ce que vous venez de voir, eh bien on appelle cela la validation d'un formulaire. On va même dire que c'est la validation côté client, car ici, c'est le JavaScript qui prend en charge la validation des données du formulaire. Et, vous savez que le JavaScript s’exécute dans le navigateur de l'internaute et non sur le serveur. La validation côté client a pour grand avantage de ne transmettre les données vers le serveur que si ces données satisfont aux normes attendues. Cela permet d'éviter de consommer de la bande passante et des ressources du serveur pour s'entendre dire, finalement, que les données sont incorrectes et ne peuvent pas être traitées. La validation côté client est, dès lors considérée comme une meilleure pratique. Mais voilà, pour réaliser cette opération de validation, eh bien, nous devons être en mesure d'intercepter la soumission d'un formulaire, et même, éventuellement, de l'empêcher si les données soumises ne peuvent pas être validées. Alors, allons voir dans le code JavaScript, comment tout cela fonctionne. De retour, ici, dans mon éditeur de code, je vais d'abord faire un petit détour par l'HTML pour vous montrer, ici, le formulaire, la balise « form ». Remarquez déjà l'action du formulaire « merci.html », c'est la page qui est envoyée quand les données sont correctement soumises, remarquez également que ce formulaire a un identifiant : « frmContact ». Remarquez aussi que chaque champ de ce formulaire a un identifiant, ici, « name », « e-mail », « phone ». Autrement dit, je vais pouvoir utiliser « getElementById » pour aller rechercher individuellement chacun de ces éléments et éventuellement au niveau des champs, aller rechercher la valeur qu'on a tapé dedans pour la valider. Vous montrer également, dans l'HTML, dans le fond du formulaire, très bas, voilà, c'est ici, en ligne 162, un élément « span » qui porte l'identifiant « errorMessage » et qui est complètement vide, pour le moment. Alors, dans le JavaScript, qu'est-ce que j'utilise ? Eh bien j'utilise d'abord, ici, en ligne 19 « window.onload ». Rappelez-vous, ici, cela me permet d'attendre que la page soit complètement chargée, que le DOM soit complètement prêt. Et l'opération que je veux exécuter, eh bien c'est ceci : c'est une fonction qui s'appelle « prepareEventHandlers ». Alors, cette fonction est définie ici, plus haut, dans le code, et que fait-elle ? Sans surprises, la première chose que l'on fait, c'est d'aller rechercher le formulaire grâce à « getElementById ». Et puis, on va associer à l’événement « onSubmit » de ce formulaire une fonction anonyme qui est définie ici. Eh bien, ce « onSubmit », c'est comme cela, en JavaScript, que je peux intercepter la soumission du formulaire. Alors, la fonction anonyme, qu'est-ce qu'elle va faire ? Elle va aller rechercher, grâce à « getElementById », le champ « e-mail », et puis je vais aller voir quelle est la valeur tapée dans ce champ « e-mail », avec « .value », on a déjà parlé de cela plus tôt, et je vais comparer cela à la chaîne de caractères vide. Et, si on se rend compte que la valeur du champ e-mail est vide, que vais-je faire ? Je vais rechercher mon élément « errorMessage », et, avec « innerHTML », je lui donne du contenu, c'est-à-dire le petit message que j'avais avant. Le plus important arrive maintenant. Comme mes données ne sont pas correctement validées, eh bien, ma fonction anonyme, ici, va renvoyer « false », « return false ». Et c'est comme cela que je stoppe la soumission du formulaire en JavaScript. « Return false ». C'est le signal pour le navigateur qu'il ne faut pas continuer avec le processus de soumission d'un formulaire et ne pas envoyer les données vers le serveur. Maintenant, j'ai aussi un « else », ici. Le « else » va s'exécuter quand la valeur du champ e-mail n'est pas égale à une chaîne de caractères vide. À ce moment-là, je vais remettre l'« inner HTML » de l'« error message » à 0, des fois que j'aurais soumis le formulaire une première fois , donc le message d'erreur apparaît, et puis maintenant je corrige l'erreur et je re-soumets le formulaire, donc je dois remettre ce message d'erreur à 0, et puis je renvoie, ici, « return true », plutôt que « return false », et « return true » est le signal pour le navigateur que le JavaScript a terminé son boulot et qu'on peut continuer le processus de soumission comme d'habitude, et donc envoyer les données vers le serveur. Vous voyez, ici, comment je peux insérer du JavaScript dans le processus de soumission et décider, même, de l'arrêter ou de le continuer en fonction de la validation des données. Alors, pour terminer, je dois vous signaler qu'il est indispensable de valider ces données côté serveur également. Imaginez, par exemple, que pour une raison quelconque, le JavaScript soit désactivé, eh bien, il ne reste, dans ce cas, que la validation, côté serveur, pour s'assurer que les données soumises soient conformes aux normes attendues. Que faut-il retenir de cette vidéo ? Il faut retenir « onSubmit » pour intercepter l’événement « soumission d'un formulaire », il faut retenir « return false » pour stopper la soumission du formulaire, ou « return true » pour l'autoriser.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :26 avr. 2016
Durée :5h09 (47 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !