Vérification de formulaire en javascript

Par Clouder le 29 Apr 2019 0 +99

Pour vérifier un formulaire en javascript, rien de plus simple. Mais avant de suivre ce tutoriel, je vous conseil d'aller voir les précédents tutoriels sur le javascript et l'HTML.


Je tiens à dire pour commencer que cette vérification doit être aussi faite en PHP car le javascript peut être modifier par le client. Cette vérification ne sert donc qu'à prévenir le client avant qu'il n’envoi le formulaire.


Pour commencer créons un formulaire simple en HTML, nous allons aussi mettre un identifiant à chacun des <input> de notre formulaire. La <div></div> avec l'identifiant "error" va être l'endroit où nous afficherons les erreurs.

<form><div id="error"></div><input type="text" name="pseudo" id="pseudo"><br><input type="email" name="email" id="email"><br><input type="password" name="password" id="password"><br><!-- Vous pouvez remplacer ce <button> par un <input> si vous le souhaitez, mais n'oubliez pas l'identifiant. --><button name="submit" id="submit">Envoyer le formulaire!</button>
</form>

Notre formulaire étant créé, nous allons passer au script, donc pour cela ouvrons les balises <script></script>

<script>var elmt = document.getElementById('submit');
    elmt.onclick = function(e) {
        e.preventDefault(false);
        // Vérification du champs pseudovar elmt_pseudo = document.getElementById('pseudo');

        // On vérifie que le champ pseudo n'est pas vide.if(elmt_pseudo.value != '' && elmt_pseudo != ' '){

            // Cette condition vérifie que le champ pseudo ne comporte pas plus de 10 caractère.if(elmt_pseudo.value.length <= 10){

                // Vérification de l'emailvar elmt_email = document.getElementById('email');

                // On vérifie que le champ email n'est pas vide.if(elmt_email.value != '' && elmt_email != ' '){

                    // Cette ligne va servir à vérifier l'email, nous reviendrons sur cette fonction dans un autre tutoriel.var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');

                    if(reg.test(elmt_email.value)){

                        // Vérification du mot de passevar elmt_password = document.getElementById('password');

                        // On vérifie que le champ password est vide.if(elmt_password.value == '' || elmt_password == ' '){document.getElementById('error').innerHTML = "Erreur: le champ password est vide.";
                            e.preventDefault();
                        } else {
                            document.getElementById('error').innerHTML = "Aucunne erreur.";
                            e.preventDefault();
                        }

                    } else {
                        document.getElementById('error').innerHTML = "Erreur: le champ email est invalide.";
                        e.preventDefault();
                    }

                } else {
                    document.getElementById('error').innerHTML = "Erreur: le champ email est vide.";
                    e.preventDefault();
                }

            }  else {
                document.getElementById('error').innerHTML = "Erreur: le champ pseudo ne doit pas avoir plus de 10 caractères.";
                e.preventDefault();
            }

        }  else {
            document.getElementById('error').innerHTML = "Erreur: le champ pseudo est vide.";
            e.preventDefault();
        }
    };
</script>


À retenir :

  • Le .value après un document.getElementById() d'un champs, permet de récupérer la valeur du champ.
  • Un .length après une valeur permet de compter le nombre de caractère dans la chaîne.
  • Les opérateurs logiques || et && permettent de dire "OU" et "ET".
  • Le .preventDefault(); permet d'annuler un événement. Voir documentation
Cette pub permet au site de vivre ...

Commentaire

Tu veux participer ?
Alors connecte toi ou inscris toi et viens participer !