<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>

$(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;
}

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;
}