Contrôle des Formulaires avec JQuery

Objectif

L’objectif de ce code est de mettre en place un contrôle sur les formulaires HTML grâce à JQuery sans avoir à envoyer le formulaire.

Code

Code HTML

L’exemple sera un simple formulaire avec 3 champs obligatoires dont un champ comportant une adresse mail.

<div id="formulaire">
    <div id="error_formular">
        Un ou plusieurs champs du formulaire ne sont pas remplis.<br/>Merci de corriger ce(s) erreur(s) puis de valider &agrave; nouveau votre formulaire.
    </div>
    <form id="testform" method="post">
        <hr/>
        <label for="name" id="l_name" class="label_oblig">Nom</label><br/><input type="text" id="name" name="name" class="donnees" rel="obligatoire" value="">
        <hr/>
        <label for="email" id="l_email" class="label_oblig">Adresse Email</label><br/><input type="text" id="email" name="email" class="donnees" rel="obligatoire" rev="email" value=""/>
        <hr/>
        <label for="age" id="l_age">Age</label><br/><input type="text" id="age" name="age" class="donnees" value=""/>
        <hr/>
        <label for="description" id="l_description" class="label_oblig">Description</label><br/><textarea id="description" name="description" class="donnees" rel="obligatoire"></textarea>
        <hr/>
        <span class="footer">Les champs marqu&eacute;s d'une &eacute;toile (<img src="http://www.kns7.org/images/required.png"/>) sont obligatoires.</span>
        <br/>
    </form>
    <button OnClick="if(check_formular()){testform.submit();}else{return false;}">Envoyer le Formulaire</button>
</div>

Code Javascript

Le code Javascript, utilisant la librairie JQuery

$(document).ready(function(){
    $('input.donnees').blur(function() {
        var email =    /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; 
        var number = /^[-]?\d*\.?\d*$/; // Nombre
        var length5 = /\b.{5}\b/; // Longueur de 5 caractères
        if($(this).attr("rel") == 'obligatoire')
        {
            if($(this).attr("rev") == 'email' && $(this).val().match(email))
            {
                trigger_ok = true;
                trigger_tested = false;
            }
            if($(this).attr("rev") == 'number' && $(this).val().match(number))
            {
                trigger_ok = true;
                trigger_tested = false;
            }
            if($(this).attr("rev") == 'length5' && $(this).val().match(length5))
            {
                trigger_ok = true;
                trigger_tested = false;
            }
            if($(this).val() != '' && trigger_tested)
            {
                trigger_ok = true;
            }
            if(trigger_ok)
            {
                $(this).removeClass("field_error");
                $("#l_"+$(this).attr("name")).removeClass("label_error");
            }
        }
    });
    $('textarea.donnees').blur(function() {
        var email =    /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; //Adresses Mail
        var number = /^[-]?\d*\.?\d*$/; // Nombre
        var length5 = /\b.{5}\b/; // Longueur de 5 caractères
        var trigger_ok = false;
        var trigger_tested = true;
        if($(this).attr("rel") == 'obligatoire')
        {
            if($(this).attr("rev") == 'email' && $(this).val().match(email))
            {
                trigger_ok = true;
                trigger_tested = false;
            }
            if($(this).attr("rev") == 'number' && $(this).val().match(number))
            {
                trigger_ok = true;
                trigger_tested = false;
            }
            if($(this).attr("rev") == 'length5' && $(this).val().match(length5))
            {
                trigger_ok = true;
                trigger_tested = false;
            }
            if($(this).val() != '' && trigger_tested)
            {
                trigger_ok = true;
            }
            if(trigger_ok)
            {
                $(this).removeClass("field_error");
                $("#l_"+$(this).attr("name")).removeClass("label_error");
            }
        }
    });
});
function alerte(id)
{
    $("#"+id).addClass("field_error");
    $("#l_"+id).addClass("label_error");
}
function check_formular()
{
    var email =    /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; //Adresses Mail
    var number = /^[-]?\d*\.?\d*$/; // Nombre
    var length5 = /\b.{5}\b/; // Longueur de 5 caractères
    var trigger = true;
    $(":input").each(function()
    {
        var valeur = $(this).val();
        var type = $(this).attr("rel");
        var rev = $(this).attr("rev");
        var nom = $(this).attr("name");
        if(type == "obligatoire")
        {
            if(valeur == '')
            {
                alerte(nom);
                trigger = false;
            }
            if(!valeur.match(email) && rev == 'email')
            {
                alerte(nom);
                trigger = false;
            }
            if(!valeur.match(number) && rev == 'number')
            {
                alerte(nom);
                trigger = false;
            }
            if(!valeur.match(length5) && rev == 'length5')
            {
                alerte(nom);
                trigger = false;
            }
        }
    });
    if(trigger)
    {
        $("#error_formular").slideUp("fast");
    }else{
        $("#error_formular").slideDown("fast");
    }
    return trigger;
}

CSS

Et enfin un peu de CSS pour rendre le tout plus agréable.

body {
    margin: 10px auto;
    width: 500px;
    padding: 20;
    border: 1px solid #808080;
}
.donnees {
    border: 1px solid #b2b2b2;
    background: #e6e6e6;
}
label {
    color: #808080;
}
.label_oblig {
    font-weight: bold;
    padding-right: 20px;
    background: url('http://www.kns7.org/images/required.png') top right no-repeat;
}
/* Error System */
.field_error {
    border: 1px solid #a50021;
}
.label_error {
    color: #a50021;
    font-weight: bold;
}
#error_formular {
    display: none;
    margin: 10px 20px;
    padding: 10px;
    vertical-align: middle;
    text-align: center;
    border:1px solid #CC0000;
    background-color: #F7CBCA;
    color:#CC0000;
}
.footer {
    font-size: 11px;
}

Explications

A la validation du formulaire, la fonction check_formular() est appelée. Elle va vérifier tous les éléments input ou textarea dont l’attribut rel est obligatoire.

Si les éléments n’ont pas d’attibuts rev de défini, la fonction va simplement vérifier qu’ils ne sont pas vides. Si un attribut rev est défini, cela correspond à un test spécifique. Dans cet exemple, j’ai défini trois règles spécifiques: email, number, length5

  • email spécifie que le champ doit être une adresse email à la syntaxe valide
  • number spécifie que le champ doit être exclusivement numérique
  • length5 spécifie que la longueur de la valeur doit être de 5 caractères

Si les conditions ne sont pas remplies, le formulaire n’est pas envoyé, un message d’erreur apparaît et on ajoute une classe aux élements et à leur label (en l’occurence, dans cet exemple, ils seront affichés en rouge).

Exemple

Un exemple peut être consulté ici. (Les codes Javascript et CSS sont directement inclus dans le HTML):

Un commentaire

  1. Wow! This blog looks just like my old one! It’s on a
    completely different subject but it has pretty much the same layout and design. Great choice of colors!

Répondre à Trimble Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *