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"; } });
Votre commentaire