Présentation et utilisation de la classe | CheckForm - Controle, validation et vérification de formulaire en javascript

Définition

C'est une classe très simple d'utilisation utilisable pour la vérification et la validation de formulaire en javascript.

Compatibilité

Tous les navigateurs sur lesquels elle a été testée :

opéra

Si vous pouvez tester la classe sous un autre navigateur n'hésitez pas à me faire connaitre la compatibilité en me contactant via la rubrique contact

Pourquoi utiliser CheckForm ?

Vous recherchez un moyen simple pour vérifier et valider vos formulaires en javascript (coté client)
Vous cherchez un outil open source
Un outil qui n'utilise aucune librairie externe
Un outil paramétrable
Et qui ne modifie en rien la structure de vos formulaires
La vérification peut porter sur : des regex, le type (en cours...), la taille, la liaison entre plusieurs champs, contrôles déclenchés par des évènements paramétrables.

Pour valider vos formulaires qu'ils fassent partie d'un nouveau projet ou d'un projet déjà éxistant qui n'effectuait pas ce genre de contrôles.
En effet l'utilisation de la classe est très simple et il vous suffit d'inclure un script Javascript ainsi que quelques lignes et le tour est joué !
Contrairement à d'autres outils disponibles sur Internet AUCUNE MODIFICATION DE VOS FORMULAIRES n'est nécessaire. Totalement dynamique, il suffit de fournir des informations simples concernant vos champs pour que le traitement puisse s'effectuer.

Utilisation

L'utilisation de CheckForm est très simple. Pas besoin de modifier vos formulaires !
Il vous suffit d'intégrer quelques lignes de code :

IMPORTANT : Renommer le fichier CheckForm_vx.js en CheckForm.js
Dans le head placer l'inclusion du fichier (qui doit avoir pour nom CheckForm avec les majuscules comme écrit)
<script type="text/javascript" src="CheckForm.js"></script>
Dans le head toujours vous devez écrire un petit bout de code obligatoire contenant vos déclarations :
<script type="text/javascript"></script>

!!! ATTENTION !!! Si vous utilisez la génération de formulaire par DOM il vous faut non pas écrire window.onload = function(){} mais function maFunctionCheck(){} et l'appeler après la génération du formulaire par DOM (ex : onclick="generationForm();maFunctionCheck();"). <script type="text/javascript"></script>
On remplace "//le code" par : (ceci n'est qu'un exemple, voir explication en dessous du cadre)
check1 = new CheckForm("form"); check1.addReg("nom","text","required","keyup","Veuillez taper un nom de 3 à 9 caractères maximum ",[3,9]); check1.addReg("mail","text","email","blur","Adresse mail non valide"); check1.addReg("numero","text","digit","blur","Numéro non valide",'',[/^[a-z]{8}$/i]); check1.addReg("password2","text","required","blur","Les deux pass doivent correspondre",'','',['password1']);

Description du code ci-dessus :
- check1 = new CheckForm("idForm");
  Vous permet d'instancier la classe CheckForm avec votre formulaire. On a dans cette ligne de code : idForm qui est l'id de votre formulaire
- check1.addReg("nom","text","required","keyup", "Veuillez taper un nom de 3 à 9 caractères maximum ",[3,9]);
  Il y a 4 lignes plus ou moins identiques qui utilisent addReg, cette fonction vous permet d'ajouter une règle sur un champs.
  !!! Un champs peut avoir plusieurs règles à lui tout seul !!!
  Cette ligne est décrite plus bas dans cette page : Description de addReg.

Description de addReg()

Vous pouvez accéder à cette définition directement dans le fichier .js de la classe.

//@chp		identifiant du champ à contrôler (id ou name)
//@typ		type du champ à contrôler
//@reg		règle à appliquer sur le champ
//@event	event qui déclenche la validation
//@mes		message à afficher si la règle n'est pas vérifiée
//@par		paramètre facultatif pouvant préciser la règle supplémentaire. (taille de la value)
//@custom_reg	paramètre facultatif pouvant préciser la règex à utiliser.
//@liens	paramètre facultatif pouvant préciser les champs liés
//
//desc			remplit les 5 tableaux de description d'un champ
//			permet d'enregistrer une nouvelle règle
addReg: function (chp, typ, reg, event, mes, par, custom_reg, liens)

Détaillons cette fonction :
addReg va créer une règle avec différents paramètres que voici :

chp : l'id ou le name du champs concerné (obligatoire)
typ : le type du champs (en cours d'implémentation dans la classe)
reg : qui est le nom de la règle qui sera appliquée sur le champs.
3 possibilités s'offrent à vous :
1. Utiliser une des règles éxistante parmis la liste suivante :
  - required
  - alpha
  - alphanum
  - digitSign
  - digit
  - nodigit
  - number
  - email
  - phone
  - url
  - date
  - hexaColor
2. Utiliser une règle custom grâce à l'argument custom_reg de la fonction
3. Vous pouvez aller dans le fichier .js et ajouter autant de règles que vous le désirez très simplement.
  il vous suffit pour cela de l'ajouter au tableau nommé -> reg
event : est l'évènement qui va déclencher le contrôle du champs (peut prendre pour valeur tous les évènements javascript, ex: blur, keyup,...).
Notez également que tous les champs sont revérifiés une fois que l'utilisateur appuie sur le bouton de validation.
mes : le message qui sera affiché en cas d'erreur
par : pour la version actuelle (v0.3) des bornes min/max (ex : [3,9])
custom_reg : une regex créée par vos soins
liens : tableau contenant les champs (id ou name) qui sont liés avec celui-ci et qui doivent donc avoir la même valeur.

Paramétrer la classe

La classe est paramétrable c'est à dire que vous pouvez facilement modifier certains aspects de son fonctionnement directement dans le fichier ".js". Pour cela rien de plus simple il vous suffit de changer la valeur afféctée aux variables de la classe.