Description

Dans divers projets de développement Web j'ai eu besoin de rendre les formulaires plus dynamiques et surtout d'y intégrer facilement des contrôles syntaxiques de base. Après pas mal de recherches sur le web et de nombreux tests mon choix s'est porté sur l'outil Form-Validation de DhtmlGoodies.

Certaines fonctions étaient absentes de cet outils pour répondre parfaitement à nos besoins nous avons donc dû le modifier pour les intégrer.

Fonctions ajoutées :
  • Gestion de l'autoSkip : changement de zone automatiquement quand on a saisi le nombre maximum de caractères.
  • Gestion dynamique des erreurs : Possibilité de définir une zone pour y afficher les erreurs.
  • Gestion des checkboxs et boutons radio
  • Deux niveaux d'erreurs visuelles "zone" et "ligne"
  • Ajout de fonctions de callback pour offrir la possibilité d'exécuter un code javascript lors de la validation ou l'invalidation d'une zone ou du formulaire.
  • Formatage des zones numériques

Modifications

  • 2007/11/24 : Correction d'un bug supprimant les styles des formulaires dans la page utilisant dhtml form - Ajout d'un attribut au formulaire à traiter (dhtmlform="1")

Utilisation

Cette gestion de formulaire est indépendante du langage de développement elle fonctionne parfaitement avec de simple pages HTML. Pour ajouter cela à votre code vous devez :
  • Ajouter les fichier t_form.css et t_form.js a votre page 
     <link rel="stylesheet" type="text/css" media="all"  href="css/t_form.css" />
 <script language="JavaScript" type="text/javascript" src="js/t_form.js"></script>
  • Définition de la zone message (option) 
    __setZoneMessage('__your_id_zone__');
...
<span id="__your_id_zone__"></span>
  • Ajout de l'attribut dhtmlform="1" au formulaire à traiter
  • Ajout des fonctions de callback (option) voir un exemple plus détailé dans le fichier téléchargeable 
    setCallBackElt('valideElt','invalideElt') ;
function valideElt(no,elt) {
   alert('valide ' + elt + ' ' + no) ;
}
function invalideElt(no,elt) {
   alert('invalide ' + elt + ' ' + no) ;
}
  • Modification de votre formulaire pour y ajouter les attributs spécifiques
    attributvaleurDescription
    required0/1Si 1 le champ est obligatoire
    autoSkip0/1Si 1 on saute à la zone suivante quand on a saisie maxlength caractères
    mask
    • email
    • numeric
    • decimal
    • money
    • money2
    • dd-mm-yyyy
    • yyyy-mm-dd
    • yyyymmdd
    • yyyy-mm
    		association d'une expression régulière prédéfinie à la zone pour la valider. En plus de la vérification de format les mask money, money2 et decimal ajoute le formatage de la zone
    freemask
    • 9 : Numeric obligatoire
    • # : Numeric facultatif
    • S : signe (+-) obligatoire
    • s : signe (+-) facultatif
    • A : Aplha majuscule obligatoire
    • a : Aplha majuscule facultatif
    • M : Aplha obligatoire
    • m : Aplha facultatif
    • V : Virgule decimale (. ,) obligatoire
    • v : virgule decimale (. ,) facultatif
    • T : Un caractère obligatoire
    • t : Un caractère facultatif
    		Construction dynamique d'une expression réguliere exemple :
  • #####9v##
  • 999AN999
    • Exemple 
    <input name="age"  id="age"
             freemask="9A9" type="text"
             autoSkip="1" required="1"
             size="3" maxlength="3">

Téléchargement

t_form.zip

Exemple

DHTML form validation
Required = 1
Required = 1, mask = email
Required = 1, mask = numeric, autoSkip=1 les deux zones doivent etre saisies pour valider la ligne
Required = 1, mask = money2, class=f_in_R
Required = 1, mask="decimal" freemask="s##v##" , class=f_in_R
Required = 1, mask= decimal, freemask = #####9v##, class=f_inRO_R
Required = 1, mask= decimal, freemask = #####9v##, class=f_in_R
Required = 0, freemask = 99999
Gender: Femme Homme Required = 1, freemask= 9A9 (input zone)
Status: Majeur Etudiant Required = 1, group = prof
Required = 0, regexpPattern="/\b[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi"
Country Required = 1
Be Sociable, Share!