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.

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
PrimFX

Salut tout le monde ! Je m'appelle Boris, j'ai 18 ans et je suis passionné d'informatique et de technologie. Je partage cette passion à travers mes vidéos que tu peux retrouver sur YouTube sous le nom de PrimFX ou bien sur ce site bien sûr (tutoriels de programmation (HTML, CSS, PHP), gameplays, vlogs high-tech...). @+

A voir aussi

2 Commentaires

POSTER UN COMMENTAIRE

Vous devez être connecté pour pouvoir poster un commentaire...

Pas encore de compte ? Créez-en un ici !



  • Photo de profil de Codeur_vigilant

    Codeur_vigilant

    26 September 2019 à 13:00

    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.

  • Photo de profil de Codeur_vigilant

    Codeur_vigilant

    26 September 2019 à 17:22

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