Une chose dont on a souvent besoin pour un développeur web, c’est la validation d’un formulaire de manière dynamique. Pour ce faire on utilise le javascript. Voici le résultat final que l’on va obtenir.

Remarque : Ici, je ne gère pas du tout l’action post du formulaire, cela n’étant pas le but du tutoriel, mais cela ne changerait rien, si le return de la fonction js vaut true alors votre gestion côté serveur aura lieu.

Nous allons maintenant voir comment réaliser un tel système. Tout d’abord, prenons l’exemple d’un formulaire de contact.

<form action="#" method="post" id="cwp_form">
    <input type="text" id="name" placeholder="Doe John" />
    <span class="form_error"></span><br />
 
    <input type="text" id="mail" placeholder="john.doe@gmail.com" />
    <span class="form_error"></span><br />

    <textarea cols="30" rows="5" id="message" placeholder="Votre message..."></textarea>
    <span class="form_error"></span><br />

    <input type="submit" class="submit" />
</form>

Le formulaire est très simple, on a deux inputs de type text et un textarea. La balise span va nous permettre d’afficher un message d’erreur si l’utilisateur n’a pas rempli les conditions désirées. Pour ce faire, on donne une couleur rouge à ces balises, on précise que la balise span va s’afficher en display: inline-block et on effectue un padding de 10 pixels afin d’éviter qu’elle ne soit collée à son input.

.form_error { 
    display: inline-block; 
    color: #FF4F4F;
    padding: 10px; 
}

Enfin, la dernière partie qui nous intéresse le plus, le javascript. On retrouve la fonction check_form() qui possède 4 arguments :

• id_input : l’input sur lequel on vérifie la valeur
• regex : la forme que la valeur doit respecter
• msg_vide : le message affiché à l’utilisateur quand ce dernier n’a rien rentré.
• erreur : le message d’erreur affiché si le champ est mal rempli.

Maintenant, voyons dans l’ordre le déroulement de la fonction, on créé d’abord une variable de test valid. On vérifie ensuite si l’input sur lequel on tente de pointer existe, si ce n’est pas le cas, on renvoie false. Ensuite, on vérifie si la valeur de l’input est vide, si c’est le cas on affiche le message d’erreur correspondant et on retourne false. De même si la valeur de l’input ne respecte pas la regex désiré . Enfin si tout est ok, on renvoie la valeur de la variable valid à savoir true : notre input a été correctement rempli.

$(document).ready(function() {
    function check_form(id_input,regex,msg_vide,erreur) {
        valid = true;
        if ($("#"+id_input).length === 0)
            return false;
        if($("#"+id_input).val() === "") {
            $("#"+id_input).next(".form_error").fadeIn().text(msg_vide);
            valid = false;
        }
        else if(!$("#"+id_input).val().match(regex)) {
            valid = false;
            $("#"+id_input).next(".form_error").fadeIn().text(erreur);
        }
        else
            $("#"+id_input).next(".form_error").fadeOut();
        return valid;
    }   

    $("#cwp_form").submit(function(event) {
        var res = check_form("name", /^[A-Za-z0-9ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ]{3,}/,"Champ vide", "3 carac min, chiffres et lettres");
        res = check_form("mail", /^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i,"Champ vide", "Adresse mail non valide !") && res;
        res = check_form("message", /./ ,"Champ vide", "") && res;
        return res;
    });
});

Enfin, voyons l’utilisation de la fonction check_form(), tout d’abord on précise le formulaire que l’on teste, notamment ici grâce à l’id cwp_form. On vérifie nos trois champs. Voyons en détail chacune des regex :

• /^[A-Za-z0-9ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ]{3,}/ : On vérifie que le nom contient au moins 3 lettres (avec accent) ou chiffres.
• /^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i : le mot commence par une lettre ou un chiffre ceci une fois ou plus, ensuite on a un arobase, puis encore des lettres ou chiffres une fois ou plus. Ensuite, on trouve un point et enfin, on a deux ou trois caractères de suite.
• /./ : Ici, on accepte tous les caractères ^^.

On récupère le résultat dans une variable résultat, qu’on compare à chaque fois avec le retour de la fonction. Et c’est tout 🙂 !