![]() |
![]() |
Tigra Form Validator is free JavaScript component performing client side form validation. With its rich feature set the script can be used with HTML forms of virtually any complexity. This component is a simple way to improve visitors' experience, robustness and resource efficiency of your web application.
Tigra Form Validaror can work with any browser capable of generic DHTML.
Here is a table of the application compatibility:
|
Tigra Form Validator distribution package contains the following files:
Where ? and * are wildcards for single character and substring respectively.
First thing to be done to the document where Tigra Form Validator will be used than is attaching product core script to a header with appropriate tag:
<head> <!-- some header data --> <script language="javascript" src="validator.js"></script> </head>
To validate fields of a HTML form Tigra Form Validator script has to create a JavaScript object instance for that form. Such a creation is done with a JavaScript line called "constructor call". So the number of constructor calls in a HTML document should be equal to a number of HTML forms the script is desired to serve.
Here is sample Tigra Form Validator constructor call:
<html> <head> <!-- some header data --> <script language="javascript" src="validator.js"></script> </head> <body> ... <!--A form for validation--> <form name="a_form" onsubmit="return v.exec()"> ... </form> ... <script language="JavaScript"> var o_fields = { ... //A structure describing fields ... }, o_config = { ... //A structure describing validator configuration ... } //Constructor call var v = new validator('a_form', o_fields, o_config) ... </script> </body> </html>
The constructor is supplied with 3 parameters:
|
The constructor is a function returning a reference to created object instance once being called. It is necessary to store that reference in a variable because it will be used than. In above sample such variable name is v.
Note that each constructor call has to be placed only after closing </form> tag of the corresponding form otherwise the form to work with will be not found by the script. Since that it is a good practice to place all validator constructor calls just before closing </body> tag.
Form fields inputs of those you would wish to validate are described
with Fields Describing Structure, a JavaScript structure that contains
names and attributes of those fields. Each form field you need to
validate corresponds to one record of the structure - a descriptor -
named exactly as that field. A descriptor is made up of a key
(descriptor name) - a string containing corresponding field name, a
colon (:) and a structure of field attributes:
<field name> : {<structure of field attributes>}
All descriptors are enclosed in curly brackets ({}) and separated with commas (,).
To tell validator script in which way an input of the field has to be validated each descriptor contains field attribute structure. The structure is a set of field attribute descriptors enclosed in curly brackets ({}) and separated with commas (,). Each field attribute descriptor consists of a name (string), colon (:) and value:
<field name> : { // structure of field attributes <attribute 1> : <value of attribute 1>, <attribute 2> : <value of attribute 1>, .... // any attributes here .... <attribute n> : <value of attribute n> }
Below is a table of field attribute descriptors currently supported:
|
Tigra Form Validator highlights labels of fields if ones have been filled with errors by just changing CSS classes to be applied to those labels.
The name of a class to be applied to highlight a label is always tfvHighlight.
The name of a class to be applied to unhighlight (normalize) a label is always tfvNormal.
So just declare both tfvHighlight and tfvNormal classes between <style></style> tags in the document header or in an external CSS file attached to the document.
Below are sample declarations for tfvHighlight and tfvNormal classes:
... <style> /* classes for validator */ .tfvHighlight {color: #CEA639;} .tfvNormal {color: black;} </style> ...
Tigra Form Validator supports a feature of checking if form field input meets certain pattern (format). The script contains several predefined formats those can be refereed by the following names:
|
Suppose there is a form named myForm containing 3 fields: first_name, last_name and email:
<form name="myForm"> <input type="text" name="first_name"><br> <input type="text" name="last_name"><br> <input type="text" name="email"> </form>
We have to set up the validator to check if:
Here is sample Fields Describing structure for the case:
var myFields = { // first_name field description line (descriptor) 'first_name' : { // the field is required 'r' : true, // field format: alphabetic characters only 'f' : 'alpha' } // last_name field description line (descriptor) 'last_name' : { // the field is required 'r' : true, // field format: alphabetic characters only 'f' : 'alpha' 'mn' : 3 }, // email field description line (descriptor) 'email' : { // field format: predefined 'f' : 'email', 'mn' : 3 } }
Tigra Form Validator behavior can be controlled by Validator Setting Structure, the third optional parameter of the constructor. Validator Setting Structure is a JavaScript structure consisting of records enclosed in curly brackets ({}) and separated with commas (,). Each record controls certain validator behavior aspect and contains a key (string name), a colon (:) and a value. Below is a table of keys currently supported by the structure and their meanings.
|
Here is a sample code for Validator Setting Structure:
o_config = { 'to_disable' : ['Submit'], 'alert' : 1 }
There is no license fee or royalty fee to be paid at any time for using the Tigra Form Validator v1.x
You may include the source code or modified source code within your own
projects for either personal or commercial use but excluding the
restrictions outlined below. The following restrictions apply to all
parts of the component, including all source code, samples and
documentation.