Tuto JS - #13 Valider des formulaires (avec les événements)

PrimFX Boris ('PrimFX') Le 24 octobre 2018

 

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.

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 !

Code vu dans ce tuto :

  • index.html
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>TUTO JS - #13 Valider des formulaires (avec les événements)</title>
    	<link href="css/style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    
    
    <h1>TUTO JS - #13 Valider des formulaires (avec les événements)</h1>
    
    <form method="POST" name="inscription">
    	<input type="text" name="pseudo" placeholder="Pseudo"><br>
    	<input type="email" name="email" placeholder="Email" id="email"><br>
    	<input type="email" name="email-confirmation" placeholder="Confirmation de l'email" id="email2"><br>
    	<input type="password" name="mdp" placeholder="Mot de passe"><br>
    	<input type="submit" value="Inscription">
    </form>
    
    <p style="color: red;" id="erreur"></p>
    
    <script src="js/app.js"></script>
    </body>
    </html>​
  • app.js
    document.getElementById("email2").addEventListener("input", function() {
    	var paragrapheErreur = document.getElementById("erreur");
    
    	if (this.value != document.getElementById("email").value) {
    		paragrapheErreur.innerHTML = "Les deux adresses email ne correspondent pas";
    	} else {
    		paragrapheErreur.innerHTML = "";
    	}
    });​
    document.forms["inscription"].addEventListener("submit", function(e) {
    
    	var erreur;
    
    	var inputs = this;
    
    	// Traitement cas par cas (input unique)
    	if (inputs["email"].value != "primfx@p.com") {
    		erreur = "Adresse email incorrecte";
    	}
    
    	// Traitement générique
    	for (var i = 0; i < inputs.length; i++) {
    		console.log(inputs[i]);
    		if (!inputs[i].value) {
    			erreur = "Veuillez renseigner tous les champs";
    			break;
    		}
    	}
    
    	if (erreur) {
    		e.preventDefault();
    		document.getElementById("erreur").innerHTML = erreur;
    		return false;
    	} else {
    		alert('Formulaire envoyé !');
    	}
    	
    });
    document.getElementById("inscription").addEventListener("submit", function(e) {
    
    	var erreur;
    
    	var inputs = this.getElementsByTagName("input");
    
    	for (var i = 0; i < inputs.length; i++) {
    		console.log(inputs[i]);
    		if (!inputs[i].value) {
    			erreur = "Veuillez renseigner tous les champs";
    		}
    	}
    
    	if (erreur) {
    		e.preventDefault();
    		document.getElementById("erreur").innerHTML = erreur;
    		return false;
    	} else {
    		alert('Formulaire envoyé !');
    	}
    
    
    	var pseudo = document.getElementById("pseudo");
    	var email = document.getElementById("email");
    	var email2 = document.getElementById("email2");
    	var mdp = document.getElementById("mdp");
    
    	if (!mdp.value) {
    		erreur = "Veuillez renseigner un mot de passe";
    	}
    	if (!email.value) {
    		erreur = "Veuillez renseigner un email";
    	}
    	if (!pseudo.value) {
    		erreur = "Veuillez renseigner un pseudo";
    	}
    	
    
    	
    });

A propos de l'auteur

PrimFX
Boris ('PrimFX')

Je m'appelle Boris, j'ai 20 ans et je suis passionné d'informatique et de technologie. Diplômé d'une Licence Informatique de l'Université de Strasbourg, j'ai co-fondé en 2019 l'entreprise Single Quote et je profite de mon temps libre pour partager ma passion à travers des vidéos & articles sur PrimFX.com 😃

Votre commentaire

Vous devez être connecté pour poster un commentaire. Se connecter ou Créer un compte

Commentaires 4

  • methy Le 15 mai, à 03:42 | Répondre

    Merci pour ce code qui m'a beaucoup appris et qui m'a permis de me débloquer pour un projet d'école
    Pour les utilisateurs , j'ai rencontrer le souci suivant : Cannot read property 'addEventListener' of null
    La solution à était d'ajouter : window.onload=function(){ ----le code-----}
    Une bonne continuation , merci pour les tuto !

  • methy Le 15 mai, à 03:38 | Répondre

    @Codeur_vigilant Bonsoir, le code est fonctionnel avec quelques retouches et les explications sont vraiment très clair, certe un copier coller seul ne fera pas des miracles ...
    Une ou deux recherches google et un peu de bonne volonté (plus qu'un ctrl c/v quoi ! )
    Etre aimable est un plus aussi sur les forum quand on a du mal à créer par soit même quelque chose ;)
    Comprendre le code qu'on utilise c'est bien aussi :)

    Bref, des bisous !

  • Codeur_vigilant Le 26 septembre, à 17:22 | Répondre

    Très mal expliqué, un tutoriel bâclé ou tout est mélangé. J'ai tout retesté et ça ne marche pas.

  • Codeur_vigilant Le 26 septembre, à 13:00 | Répondre

    La méthode avec forms ne fonctionne pas. Je viens de la tester et impossible de faire passer la valeur d'une textarea avec. Des informations données dans ce tutoriel sont fausses et font perdre du temps.