Description

In many projects of web developement I had to make the forms more dynamic to integreate easily many syntax tests. After many research on the web and tests I chose a DHTML tools Form-Validation by DhtmlGoodies.

Somes functions of this tools were absent. So to integrate them I had to modificate this tool.

Added Functions :
  • autoSkip : skip to the next zone when we enter the maximall number of charactere.
  • Display error message : You can define an error zone to display this message.
  • Added Checkboxs and radio butons
  • Two displays errors levels "zone" and "line"
  • Add callback function to offer the possibility of executing javascript code during validation or invalidation of a zone or all forms.
  • Format of the numerical's zones

Use

You can use this code with any web developement language (PHP, ASP, JSP, HTML, ...). To add this function in your code you must :
  • Add t_form.css and t_form.js files to your 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>
  • Define message's zone (option) 
    __setZoneMessage('__your_id_zone__');
...
<span id="__your_id_zone__"></span>
  • add dhtmlform="1" attibute to form tag (to set this tolls ON of this form)
  • Add callback's functions (option) 
    setCallBackElt('valideElt','invalideElt') ;
function valideElt(no,elt) {
   alert('valide ' + elt + ' ' + no) ;
}
function invalideElt(no,elt) {
   alert('invalide ' + elt + ' ' + no) ;
}
  • Modify your forms to add news attributes
    attributvaluesDescription
    required0/11 if this zone is required
    autoSkip0/11 to skip automaticly to the next zone when the maxlength of char are entered
    mask
    • email
    • numeric
    • decimal
    • money
    • money2
    • dd-mm-yyyy
    • yyyy-mm-dd
    • yyyymmdd
    • yyyy-mm
    		association of a regular expression to control this zone. Moreover, money, money2 add decimal mask add a zone formating
    freemask
    • 9 : Numeric mandatory
    • # : Numeric not m
    • S : signe (+-) mandatory
    • s : signe (+-) not m
    • A : Aplha uppercase mandatory
    • a : Aplha uppercase not m
    • M : Aplha mandatory
    • m : Aplha not m
    • V : decimale point (. ,) mandatory
    • v : decimale point (. ,) not m
    • T : one char mandatory
    • t : one char not m
    		Construct dynamicly a regular expression sample :
  • #####9v##
  • 999AN999
    • Sample 
    <input name="age"  id="age"
             freemask="9A9" type="text"
             autoSkip="1" required="1"
             size="3" maxlength="3">

download

t_form.zip

Sample forms

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!