TUTO JS - #13 VALIDER DES FORMULAIRES (AVEC LES ÉVÉNEMENTS)

Découvrons comment vérifier et valider (ou non) les formulaires de notre site en JS ! Nous utiliserons pour cela les événements JavaScript vus dans le précédent tuto ( • TUTO JS - #12 LES ÉVÉN... ).
Valider ses formulaires en JS sert de "pré-validation" (avant une validation back-end dans le cas où les données seront stockées afin d'être utilisées ultérieurement) et permet aux internautes de voir quelles sont les erreurs potentiels dans le formulaire rempli avant de créer une requête vers le serveur pour valider définitivement le formulaire. Avec une bonne validation JS d'un formulaire, on peut donc économiser pas mal de ressources sur son serveur !
✍ Retrouvez tout le code du tuto ici : www.primfx.com...
🙋 Une question ? Le forum du site dédie une section entière au JavaScript ! ➡️ www.primfx.com...
N'oubliez pas de vous abonner, c'est rapide et sympa !
-------------------------------------------------------------------------------­----------------
► S'abonner : goo.gl/Cfrt1B
► Site internet : primfx.com
► Me suivre (réseaux sociaux) : social.primfx....
Musique d'intro: dlvsound.wordp...
Copyright © PrimFX

[@philippedavid7238]

J'adore cette façon d'expliquer le JS tout devient plus clair dans ma tête - Merci !

[@tartagueulealarecre9528]

Excellente vidéo ! Moi qui débute pas tout à fait, y avait quand même deux, trois détails qui m'échappaient depuis un bout de temps et tu les a éclairé ! Très bien expliqué, tu prends le temps d'expliquer toutes les étapes de base sans te la péter. Même pour un dev intermédiaire, on peut revenir sur ta vidéo pour assainir ses bases quand on part trop loin dans les complications (si vous voyez ce que j'veux dire). Merci !

[@slimeblower5243]

Mais quelle démonstration !! Un coup de maître !! Merci, t'es un boss !!

[@elhamshamza8512]

C'est cool de suivre tes cours... j'espère que tu t'améliores de plus en plus

[@lambertax]

Super rappel pour moi qui utilise occasionnellement js pour d’autres. Merci🤗

[@ruizemmanuel7126]

tes cours sont tops, très bien expliqués, vidéo top : jamais on est perdu ou dans le flou !!!

[@NicolasMarcaud]

Hâte de voir la vidéo suivante ! J'ai un peu de mal avec les requêtes Asynchrones !

[@franckyoangel6987]

moi de meme

[@issansabimana5122]

En plus tu es à Montréal! Faut que je vienne te rencontrer un jour!

[@MS-dj4kf]

Super le tuto, le cours est vraiment complet. Merci!

[@JulienMalara]

De retour après 1 an ! ^^

[@NametVevo]

Salut très bonne vidéo j'aimerais une suite avec des regex et d'autres vérification si possible. Merci beaucoup continue ce que tu fais tu m'aides beaucoup !

[@wissemhafsa3523]

merci grâce à toi j'en ai appris énormerment !

[@lapetitesouris6808]

Merci pour se tuto très claire. Ca aurait top si on avais ici la ligne de code qui permet de renseigner l'adresse email vers laquelle tout les champs du formulaire serons envoyer.

[@Eloise-graceMOUBOUENGOU]

Très bonne vidéo. Merci

[@fondjanarcisse5554]

merci bien, mo prof italien a fait ce cours en salle et j'ai rien compris , toi t'es assez explicite , je pense que je vais me regaler.

[@AlexandreGRIMAL-t1d]

salut tu pourrais refaire une vidéo d'une création de formulaire avec les protection genre des injections.. mais aussi transférer les donnée dans une BDD se serait vrmt top !

[@j.r.covinha48]

wawawa ! tes tutos sont vraiment propre... Merci pour le partage !

[@flocons86]

Merci et hâte de voir la suite avec le Back End !

[@haithemmathlouthi8190]

Merci bcp c'est un super tuto pour commencer en formulaire

[@guill1672]

Oui merci d’avoir repris t es videos ;)

[@jocelynpater4754]

les vidéos que vous faites sont très bien. je débute en PHP, et je voudrais réalisé une application pour un site de covoiturage, dont les utilisateurs devront passer par un formulaire pour la mise en relation. l’utilisateur choisi sa ville dans une liste et en fonction de la ville les différents itinéraire seront proposes. En 1 - Formulaire contient les champs suivants: Nom, Prénom, Adresse email, Numéro de téléphone, sélection ville de départ En 2 - Lorsque le voyageur clic sur "Rechercher", les destinations correspondantes à sa ville de départ son proposées. comment faire pour réaliser cela? Cordialement

[@manon3054]

Merci beaucoup ! 🙂

[@axonile836]

Content de te revoir. Franchement, le JS c'est génial. Il parait qu'il a même un langage serveur avec node.JS, franchement, je me pose des question sur l'utilité du PHP. Bref, pouce bleu.

[@alainterieur5004]

je pensais que ça chaine avait été supprimée je suis resté abonné heureusement

[@isa8383]

excellente vidéo, clair net et très efficace 👍👍👍

[@hegelmotokoua]

Après "les teachers du net" voilà mon prof de JS

[@brasicolo]

il explique terriblement !!!! clair !!

[@aliplaysgtr]

Au top mec!

[@anisdhouieb9918]

hate de voir plus de vidéos, !!!

[@mikegodfrinne931]

Bonjour, est-ce que ce tutoriel me permet également de protéger mes formulaires ? Par là j'aimerais savoir si c'est une bonne completion à Php ? Merci

[@miguelmba2224]

merci bro

[@YoannBuzenet]

Merci pour ta video !

[@jamescarter26]

merci pour la vidéo

[@celiatmt]

Bonjour, j'ai une question svp : j'ai télécharger le logiciel Node js sur mon macbook pro, j'ai pu l'installer mais je n'arrive pas a l'afficher, j'ai contacter appel et ils m'ont confirmer que ça vient pas de mon mac Avez-vous déja rencontrer ce genre de probleme ? ou avez vous une solution a me suggerer ?

[@LamineBANDAOGO-f8l]

merci🙏

[@Gag0unet]

Merci pour cette vidéo, j'en ai appris plus que ce que je pensais en la lançant, c'est toujours intéressant de voir des nouvelles méthodes, mais pourquoi continuer à utiliser des var au lieu des let?

[@primfxdesign]

Merci pour ton comentaire ! La seule différence entre « var » et « let » est en fait la portée des variables que l'on crée à l'aide de ces deux mots clés : la première méthode pour une portée à l'échelle d'une fonction et la seconde à l'échelle d'un bloc uniquement. Vu que je n'ai encore jamais présenté ça en vidéo, je reste pour l'instant uniquement avec des « var », mais il n'y a aucune restriction à utiliser des « let » ;-)

[@raniaabirnaimi5819]

d'abord je tenais a vous remerciez pour cette video .. et on serait reconnaissant si vous nous faites une video comment traiter ou matcher php et js SVP

[@sofianetapsoba6388]

Salut coach est ce que c’est possible d’intégrer un système de paiement sur un site programmé avec JS si oui quelle sont les conditions svp?merci

[@darcydev9509]

vraiment tes tutos sont plus intéressants . mais il faut faire un tutos qui nous montre comment envoyer des données vers une autre fichier sans recharger la page. ça sera vraiment très bon

[@primfxdesign]

Merci ! Haha c'est prévu, on commence à parler de requêtes asynchrones dans la prochaine vidéo prévue pour mercredi à 18h ;-)

[@thecrazzxz3383]

c'est cool mais ça aurait été mieux que t'ai montré comment récupérer ce formulaires (le pseudo, email...)

[@alihamoudatn]

svp je cherche a faire un forumlaire mais je ne sais pas quel langage utilise node.js ou PHP vos conseil svp tks

[@franckyoangel6987]

salut PrimeFX je suis tes videos depuis pas mal de temps deja et je voudrais te demander stp de nous apprendre au travers tes tutos comment inserer le javascript dans du PHP si possible, j'aimerais vraiment apprendre cet aspects vu que je suis débutant , merci bcp de nous aider et bcp de courage à toi

J'ai remarqué que tu fait toujour l'erreur d'étiqueter avec ID, Mais c'est pas sensé être une mauvaise manière de procéder niveau optimisation ? Faudrait pas plutôt changer tout tes ID par des CLASS ? Sa serait plus optimisée.

[@yassinmez1065]

Merciii ♥️♥️♥️♥️

[@bernard-ng]

Back in the game

[@kanteali7131]

merci

[@oliverstronglesage8554]

good job

[@irevelb]

PrimFX j'ai une question par rapport au js. J'ai un fichier js et j'aimerais suprimé du contenu en appuyant sur une touche par exemple: onkeypress = function(e){ if(e.charCode == 48){ LaFonction() } } sa ces pour chargé la div mais moi se que je veux ces si la div existe de la supprimé mais moi sa ne fonctionnent pas merci de m'aidez

[@primfxdesign]

Hello ! Je t'invite à poster ta question sur le forum (www.primfx.com/forum/programmation/javascript/), ce sera plus pratique pour répondre avec - si nécessaire - des p'tits bouts de codes et ça peut aider d'autres personnes qui rencontreraient le même pb que toi :-)

[@irevelb]

Probème réglé !

[@ryuuketsu9799]

Welcome back

[@Luminasonique]

Bonjour et merci mais en tant que debutant trop de facons differentes d ecrire le meme truc c' est hardcore a suivre ....et surtout a retenir.....

[@baptman9307]

Comment ça se passe avec les div bootstrap ?

[@guineaContent]

sa faisais un bye Prim

[@azadejoon]

pourquoi première ligne a type error let valid = document.getElementById("submitForm"); valid.addEventListener("validation",function (e){ let erreur; let inputs =this.document.getElementsByTagName("input"); for (let i = 0 ; i < inputs.length ; i++) { e.preventDefault(); console.log(inputs[i]); if(!inputs[i].value){ erreur = "veiullez renseigner tous les champs, SVP !!! " } } if(erreur){ e.preventDefault(); document.getElementsByClassName("errer").innerHTML = erreur ; return false; }else { console.log(" Formulaire envoyé !"); }; }); HTML Votre nom : Votre prénom : Votre email : Votre genre : Choisissez votre genre Femme Homme Lieu de résidence ? L'hyper-centre La banlieue La campagne Type d'habitation Appartement Maison Ferme Loft

[@newte560]

validation n'est pas un évènement donc la ligne suivante n'est pas correct : valid.addEventListener("validation",function (e){. Tu peux le remplacer par "submit" ou "click"

[@cuneges]

je pete un plombs, il se passe rien et je fais exactement la meme chose, je comprend pas

[@zorroauditore1202]

Regarde sur le navigateur, la console pour voir les messages d'erreurs, ça t'indiquera la ligne de code qui a une erreur.

[@angeseri2942]

il est plus simple de le faire avec Jquery pour gagner en temps.

[@mine_stone2495]

C'est qui ce type là déjà ? Ah oui c'est lui ! Tu aurais put expliquer ton absence

[@primfxdesign]

Haha x) Je parlerai de ça dans un p'tit live sur ma chaîne à l'occasion ;) (j'ai pas forcément envie de dédier toute une vidéo à ça ^^)

[@axonile836]

@@primfxdesign La vie de PrimFX en 43 volumes : - Vidéo 00 (oui on commence pas par 1 !) : Introduction de la préface, partie0. ...

[@mathieubaugard7326]

Bon bah je sais comment ne pas valider un formulaire mais j'étais là pour l'inverse jsuis deg

[@imaneelboustati9221]

Super mais tu parles beaucoup trop vite , on a vraiment du mal a suivre

[@masaakistephanebenon547]

tu parles très vite.....

[@remitheguik1303]

merci !