Vérification de formulaire en javascript

Pour vérifier un formulaire en javascript, rien de plus simple. Mais avant de suivre ce tutriel, 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'envoit 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 pseudo
        var 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'email
                var 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 passe
                        var 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 evénement. Voir documentation
Par TBMaster59 le 22 Apr 2018
Cette pub permet au site de vivre ...

Commentaire

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