KNet Solutions
Wilogo
Table des Matières
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 à 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és d'une é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>
<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 à 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és d'une é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;
}
$('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;
}
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):
