Créer un contrôle javascript universel en Javascript / jQuery

En plus de la création des formulaires en HTML, pour laquelle j'ai déjà donné une astuce dans un précédent billet, il y a un autre aspect long et peu intéressant dans la conception de formulaires : les contrôles javascript. Ces derniers permettent de vérifier que le formulaire a été dûment rempli par l'internaute avant d'enregistrer ou d'envoyer par E-mail les données saisies.

En général, pour chaque formulaire sur un site on créé une fonction spécifique. Ce qui peut s'avérer rapidement une grosse perte de temps.

La problématique est donc posée : comment gagner du temps tout en effectuant des contrôles sur les formulaires en bonne et due forme ?

Il suffit d'avoir une seule et même fonction pour l'ensemble des formulaires. C'est là que l'utilisation de jQuery devient très intéressante. En effet, avec jQuery il est possible d'agir sur les éléments de la page ayant le même sélecteur.

Nous allons donc définir une classe spécifique aux éléments de formulaire obligatoires. De plus, nous allons indiquer un élément title aux champs formulaires afin de pouvoir les réutiliser dans notre fonction :

<input name="nom" id="nom" class="obligatoire" title="Nom" type="text">

Ainsi, tous les éléments ayant la classe "obligatoire" devront être remplis. La fonction javascript suivante se charge du contrôle :

function VerifForm(){
var count=1;
var message="";
$(".obligatoire").map(function(){

if($(this).val()=='')
{
message += "\n - "+$(this).attr("title");
count++;
}
});

message += "\n\n"+"Puis validez de nouveau le formulaire";

if(count==2) { alert("Veuillez remplir ce champ :\n"+message);
return false; }
else if(count>2) { alert("Veuillez remplir ces champs\n"+message);
return false; }
else { return true; }

}

Ainsi, si le champ "nom" n'est pas rempli, une alerte javascript (qui peut être modifiée par une alerte ajax, avec par exemple le plugin facebox) indiquera que le champ n'est pas rempli.

Il ne faut pas oublier d'appeler cette fonction dans la balise <form> : onsubmit="return VerifForm();"

Cette fonction est basique et doit être améliorée pour prendre en compte d'autres éléments de formulaire tels que les cases checkbox, les boutons radio, etc. De plus, il serait judicieux de définir des classes différentes pour contrôler les adresses email, les numéros de téléphone, etc.

Commentaires

  • Sun Location
    Merci pour cet article utile ... Je cherchais justement à controler un formulaire avec Jquery. Je me suis servi de cet article comme base !

Ajouter un commentaire