• French
  • English

Welcome on the presentation's page of CheckForm

What is CheckForm ?

Definition

It's a user (and developer) friendly class, can be use to check, validate and verify your forms in javascript.

Compatibility

Compatible and tested navigator :



If you can test the class on others navigator you can contact us to tell us the result of your test. Contact me

Why would you use CheckForm ?

  • If you search an easy way to check your and validate your forms in javascript
  • It's OpenSource AND FREE !
  • CheckForm DON'T REQUIRE EXTERNAL LIBRAIRIE
  • It's cutomizable
  • Non-obstrive, it not change your forms structure
  • The check can be made on : regex, type (soon...), size (min/max), liaison between 1 or N fields, controls events can be set up.
To validate your forms, qu'ils fassent partie of a new project or of a already existing project that didn't make this controls before.
Indeed the class installation is really easy, you have just to include the Javascript's class and put some line on your html document, It's WORK !
Contrairement of some other check form class NO MODIFICATION IS NECESSARY on your html form structure. Completly dynamic, you just have to give some information about the field !

How to use

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)
  • Dans le head toujours vous devez écrire un petit bout de code obligatoire contenant vos déclarations :
  • On remplace "//le code" par : (ceci n'est qu'un exemple, voir explication en dessous du cadre)


    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 identique qui utilise 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. 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âve à 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ènement javascript, ex: blur, keyup,...).
    Notez également que tous les champs sont revérifié une fois que l'utilisateur appui 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éé par vos soins
  • liens : tableau contenant les champs (id ou name) qui sont lié 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.
  • Mode debug :
    • Variable : debug
    • Valeur : true (activé), false (désactivé)
  • Couleur du champs si VALIDE :
    • Variable : validateColor
    • Valeur : couleur en héxadécimal entre quote (ex : '#e5ff80')
  • Couleur du champs si INVALIDE :
    • Variable : errorColor
    • Valeur : couleur en héxadécimal entre quote (ex : '#e5ff80')
  • Element dans lequel est affiché le message :
    • Variable : msgElement
    • Valeur : nom de balise HTML entre quote sans les crochets ouvrants ou fermants(ex : 'p', 'img', 'div', 'li', 'strong', 'span',...)
  • Attributs de votre balise dans laquelle sera affiché le message :
    • Variable : msgAttributes
    • Valeur : n'importe quel attribut suivit de sa valeur (ex : 'style' : 'color=#000;padding:2px;font-size:0.9em;')
  • Astuce ! Ajouter une regex :
    Il vous suffit d'ajouter une ligne au tableau reg
  • Astuce ! Faire appaaitre une image au lieu du message :
    Il vous suffit pour cela de donner à msgElement la valeur 'img' et dans msgAttributes 'src':'./chemin/votre_image.png'