Location: PHPKode > projects > Lanai Content Management Framework > include/jsvalidator/Documentation.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>JavaScript Form Validator Documentation</title>
<Style>
BODY, P,TD{ font-family: Arial,Verdana,Helvetica, sans-serif; font-size: 10pt }
H1{ font-family: Arial,Verdana,Helvetica, sans-serif; font-size: 18pt; color : #000066}
H3{ font-family: Arial,Verdana,Helvetica, sans-serif; font-size: 12pt; color : #000066 }
A{font-family: Arial,Verdana,Helvetica, sans-serif;}
B {	font-family : Arial, Helvetica, sans-serif;	font-size : 12px;	font-weight : bold;}
CODE {font-family : Courier,monospace;font-size: 10pt;color : #800000;}
CODE.htm {font-family : "Courier New", Courier, monospace;	font-size : x-small;	color : #000080;}
</Style>
</head>

<body>
<center>
<table cellspacing="2" cellpadding="2" border="0" width="600">
<tr><td>
	<h1>JavaScript Form Validations Made Easy!</h1>
	<h3>Documentation for JavaScript Form Validator</h3>
	<HR size=1>
	<P>
	The Form validation script is distributed free from JavaScript-Coder.com<br>
	You can use the script in your web pages for free.
	</P>
	<P>
	You may please add a link to JavaScript-Coder.com, 
	making it easy for others to find this script.<br>
	Checkout the <A href="http://www.javascript-coder.com/links/how-to-link.php"
	target="_blank">Give a Link &amp; Get a Link!</A> page.
	</P>
	<P>
	<B>JavaScript Coder</B><br>
	It precisely codes what you imagine!<br>
	Grab your copy here: <A href="http://www.javascript-coder.com">http://www.javascript-coder.com</A>
	</P>
	<HR size=1>
	<P>
	Using client side JavaScript is an efficient way to validate the user input 
	in web applications. When there are many fields in the form, the JavaScript 
	validation becomes too complex.
	</P> 
	<P>
    The JavaScript class presented here makes the form validations many times easier.
	</P>
	<P>
	The idea is to create a set of "validation descriptors" associated with each element 
	in a form. The "validation descriptor" is nothing but a string specifying the type of 
	validation to be performed.
	</P>
	<P>
	Each field in the form can have 0, 1, or more validations. For example, the input should 
	not be empty, should be less than 25 chars, should be alpha-numeric, etc
	</P>
	You can associate a set of validation descriptors for each input field in the form.
	<a name="3"></a>
	<h3>Using The Script</h3>
	1.Include gen_validatorv2.js in your html file just before closing the HEAD tag<br><br>
	
	<CODE>
	 &lt;script language="JavaScript" src="gen_validatorv2.js" type="text/javascript"&gt;&lt;/script&gt;<BR>
	 &lt;/head&gt;<BR>
	</CODE><br>
	
	2. Just after defining your form,
	Create a form validator object passing the name of the form<br><br>
	
	<CODE class='htm'>
	&nbsp;&lt;FORM name='myform' action=""&gt;<BR>
	&nbsp;&lt;!----Your input fields go here --&gt;<BR>
	&nbsp;&lt;/FORM&gt;<BR>
	</CODE><CODE>
	&nbsp;&lt;SCRIPT language="JavaScript"&gt;<BR>
	&nbsp;var frmvalidator &nbsp;= new Validator("myform");<BR>
	.... 
	</CODE>
	<br>
	<br>
	
	3. Now add the validations required<br><br>
	
	<CODE>
		frmvalidator.addValidation("FirstName","alpha");
	</CODE><br><br>
	
	
	the first argument is the name of the field and the second argument is the 
	validation descriptor, which specifies the type of validation to be performed.<br>
	You can add any number of validations.The list of validation descriptors are provided 
	at the end of the documentation.<br>
	The optional third argument is the error string to be displayed if the validation 
	fails.<br>
	<br>
	<CODE>
		frmvalidator.addValidation("FirstName","alpha");<br>
		frmvalidator.addValidation("FirstName","req","Please enter your First Name");<br>
		frmvalidator.addValidation("FirstName","maxlen=20",<br>
			"Max length for FirstName is 20");		<br>
	</CODE>	<br>
	<br>
	4. Similarly, add validations for the fields where validation is required.<br>
	That's it! You are ready to go.
	<A name="3"></A>
	<h3>Example</h3>
	The example below will make the idea clearer<br>
	<CODE class="htm">
			&lt;form action="" name="myform" &gt;<BR>
			&lt;table cellspacing="2" cellpadding="2" border="0"&gt;<BR>
			&lt;tr&gt;<BR>
			&nbsp;&nbsp;&lt;td align="right"&gt;First Name&lt;/td&gt;<BR>
			&nbsp;&nbsp;&lt;td&gt;&lt;input type="text" name="FirstName"&gt;&lt;/td&gt;<BR>
			&lt;/tr&gt;<BR>
			&lt;tr&gt;<BR>
			&nbsp;&nbsp;&lt;td align="right"&gt;Last Name&lt;/td&gt;<BR>
			&nbsp;&nbsp;&lt;td&gt;&lt;input type="text" name="LastName"&gt;&lt;/td&gt;<BR>
			&lt;/tr&gt;<BR>
			&lt;tr&gt;<BR>
			&nbsp;&nbsp;&lt;td align="right"&gt;EMail&lt;/td&gt;<BR>
			&nbsp;&nbsp;&lt;td&gt;&lt;input type="text" name="Email"&gt;&lt;/td&gt;<BR>
			&lt;/tr&gt;<BR>
			&lt;tr&gt;<BR>
			&nbsp;&nbsp;&lt;td align="right"&gt;Phone&lt;/td&gt;<BR>
			&nbsp;&nbsp;&lt;td&gt;&lt;input type="text" name="Phone"&gt;&lt;/td&gt;<BR>
			&lt;/tr&gt;<BR>
			&lt;tr&gt;<BR>
			&nbsp;&nbsp;&lt;td align="right"&gt;Address&lt;/td&gt;<BR>
			&nbsp;&nbsp;&lt;td&gt;&lt;textarea cols="20" rows="5" name="Address"&gt;&lt;/textarea&gt;&lt;/td&gt;<BR>
			&lt;/tr&gt;<BR>
			&lt;tr&gt;<BR>
			&nbsp;&nbsp;&lt;td align="right"&gt;Country&lt;/td&gt;<BR>
			&nbsp;&nbsp;&lt;td&gt;<BR>
				&nbsp; &lt;SELECT name="Country"&gt;<BR>
					&lt;option value="" selected&gt;[choose yours]<BR>
					&lt;option value="008"&gt;Albania<BR>
					&lt;option value="012"&gt;Algeria<BR>
					&lt;option value="016"&gt;American Samoa<BR>
					&lt;option value="020"&gt;Andorra<BR>
					&lt;option value="024"&gt;Angola<BR>
					&lt;option value="660"&gt;Anguilla<BR>
					&lt;option value="010"&gt;Antarctica<BR>
					&lt;option value="028"&gt;Antigua And Barbuda<BR>
					&lt;option value="032"&gt;Argentina<BR>
					&lt;option value="051"&gt;Armenia<BR>
					&lt;option value="533"&gt;Aruba	<BR>
				&nbsp;&lt;/SELECT&gt;<BR>
				&lt;/td&gt;<BR>
			&lt;/tr&gt;<BR>
			&lt;tr&gt;<BR>
			&nbsp;&nbsp;&lt;td align="right"&gt;&lt;/td&gt;<BR>
			&nbsp;&nbsp;&lt;td&gt;&lt;input type="submit" value="Submit"&gt;&lt;/td&gt;<BR>
			&lt;/tr&gt;<BR>
			&lt;/table&gt;<BR>
			&lt;/form&gt;<BR>
			</CODE><CODE>
			&lt;script language="JavaScript" type="text/javascript"&gt;<BR>
			&nbsp;var frmvalidator&nbsp;= new Validator("myform");<BR>
			&nbsp;frmvalidator.addValidation("FirstName","req","Please enter your First Name");<BR>
			&nbsp;frmvalidator.addValidation("FirstName","maxlen=20",<BR>
				"Max length for FirstName is 20");<BR>
			&nbsp;frmvalidator.addValidation("FirstName","alpha");<BR>
			&nbsp;<BR>
			&nbsp;frmvalidator.addValidation("LastName","req");<BR>
			&nbsp;frmvalidator.addValidation("LastName","maxlen=20");<BR>
			&nbsp;<BR>
			&nbsp;frmvalidator.addValidation("Email","maxlen=50");<BR>
			&nbsp;frmvalidator.addValidation("Email","req");<BR>
			&nbsp;frmvalidator.addValidation("Email","email");<BR>
			&nbsp;<BR>
			&nbsp;frmvalidator.addValidation("Phone","maxlen=50");<BR>
			&nbsp;frmvalidator.addValidation("Phone","numeric");<BR>
			&nbsp;<BR>
			&nbsp;frmvalidator.addValidation("Address","maxlen=50");<BR>
			&nbsp;frmvalidator.addValidation("Country","dontselect=0");<BR>
			&lt;/script&gt;<BR>	
	</CODE>
	<A name="4"></A>
	<h3>Some Additional Notes</h3>
	<LI type="disc">The form validators should be created only after defining the HTML form
	(only after the &lt;/form&gt; tag. )<br>
	<LI type="disc">Your form should have a distinguished name. 
	If there are more than one form 
	in the same page, you can add validators for each of them. The names of the
	forms and the validators should not clash.
	<LI type="disc">You can't use the javascript onsubmit event of the form if it you are 
	using this validator script. It is because the validator script automatically overrides the
	onsubmit event. If you want to add a custom validation, see the section below
	</LI>
	<A name="5"></A>
	<h3>Adding Custom Validation</h3>
	If you want to add a custom validation, which is not provided by the validation descriptors,
	you can do so. Here are the steps:
	
	<LI type="disc">Create a javascript function which returns true or false depending on the validation.<br>
	
	<CODE>
		function DoCustomValidation()<BR>
		{<BR>
		&nbsp;&nbsp;var frm = document.forms["myform"];<BR>
		&nbsp;&nbsp;if(frm.pwd1.value != frm.pwd2.value)<BR>
		&nbsp;&nbsp;{<BR>
		&nbsp;&nbsp;&nbsp;&nbsp;alert('The Password and verified password does not match!');<BR>
		&nbsp;&nbsp;&nbsp;&nbsp;return false;<BR>
		&nbsp;&nbsp;}<BR>
		&nbsp;&nbsp;else<BR>
		&nbsp;&nbsp;{<BR>
		&nbsp;&nbsp;&nbsp;&nbsp;return true;<BR>
		&nbsp;&nbsp;}<BR>
		}<BR>
	</CODE><br>
	
	<LI type="disc">Associate the validation function with the validator object.<br>
	<CODE>
	frmvalidator.setAddnlValidationFunction("DoCustomValidation"); 
	</CODE><br>
	</LI>
	<P>
	The custom validation function will be called automatically after other validations.
	</P>
	<P>
	If you want to do more than one custom validations, you can do all those
	validations in the same function.
	</P>
	<CODE>
		function DoCustomValidation()<BR>
		{<BR>
		&nbsp;&nbsp;var frm = document.forms["myform"];<BR>
		&nbsp;&nbsp;if(false == DoMyValidationOne())<BR>
		&nbsp;&nbsp;{<BR>
		&nbsp;&nbsp;&nbsp;&nbsp;alert('Validation One Failed!');<BR>
		&nbsp;&nbsp;&nbsp;&nbsp;return false;<BR>
		&nbsp;&nbsp;}<BR>
		&nbsp;&nbsp;else<BR>
		&nbsp;&nbsp;if(false == DoMyValidationTwo())<BR>
		&nbsp;&nbsp;{<BR>
		&nbsp;&nbsp;&nbsp;&nbsp;alert('Validation Two Failed!');<BR>
		&nbsp;&nbsp;&nbsp;&nbsp;return false;<BR>
		&nbsp;&nbsp;}<BR>
		&nbsp;&nbsp;else<BR>
		&nbsp;&nbsp;{<BR>
		&nbsp;&nbsp;&nbsp;&nbsp;return true;<BR>
		&nbsp;&nbsp;}<BR>
		}<BR>
	</CODE><br>
	where DoMyValidationOne() and DoMyValidationTwo() are custom functions for
	validation.
	<A name="6"></A>
	<h3>Clear All Validations</h3>
	In some dynamically programmed pages, it may be required to change the validations in the
	form at run time. For such cases, a function is included which clears all validations in the 
	validator object.<br><br>
	
	<CODE>
	frmvalidator.clearAllValidations(); 
	</CODE><br>
	<br>
	
	this function call clears all validations you set.<br>
	You will not need this method in most cases.

	<a name="7"></a>
	<h3>Table of Validation Descriptors</h3>	
	
     <table cellspacing="2" cellpadding="2" border="1" width="520px">
      <tr>
          <td><FONT face=Arial size=2>
      	required<BR>
      	req </FONT>
      	</td>
          <td><FONT face=Arial size=2>The field should not be 
            empty </FONT>
      	</td>
      </tr>
      <tr>
          <td><FONT face=Arial size=2>
      	maxlen=???<BR>
      	maxlength=??? 
      	</td>
          <td><FONT face=Arial size=2>checks the length entered data to the maximum. For 
            example, if the maximum size permitted is 25, give the validation descriptor as "maxlen=25" 
      	</td>
      </tr>
      <tr>
          <td><FONT face=Arial size=2>
      	minlen=???<BR>
      	minlength=??? 
      	</td>
          <td><FONT face=Arial size=2>checks the length of the entered string to the 
            required minimum. example "minlen=5"
      	</td>
      </tr>
      <tr>
          <td><FONT face=Arial size=2>
      	alphanumeric /<BR>
      	alnum </FONT>
      	</td>
          <td><FONT face=Arial size=2>Check the data if it 
            contains any other characters other than alphabetic or numeric characters 
            </FONT>
      	</td>
      </tr>	  
      <tr>
          <td><FONT face=Arial size=2>num <BR>
      	numeric </FONT>
      	</td>
          <td><FONT face=Arial size=2>Check numeric data 
          </FONT>
      	</td>
      </tr>
      <tr>
          <td><FONT face=Arial size=2>alpha <BR>
      	alphabetic </FONT>
      	</td>
          <td><FONT face=Arial size=2>Check alphabetic data. 
            </FONT>
      	</td>
      </tr>	  
      <tr>
          <td><FONT face=Arial size=2>email </FONT>
      	</td>
          <td><FONT face=Arial size=2>The field is an email 
            field and verify the validity of the data. </FONT>
      	</td>
      </tr>
      <tr>
          <td><FONT face=Arial size=2>lt=???<BR>
      	lessthan=??? 
      	</td>
          <td><FONT face=Arial size=2>
      	Verify the data to be less than the value passed.
      	Valid only for numeric fields. <BR>
      	example: if the 
            value should be less than 1000 give validation description as "lt=1000"
      	</td>
      </tr>
      <tr>
          <td><FONT face=Arial size=2>gt=???<BR>
      	greaterthan=???	</td>
          <td><FONT face=Arial size=2>
      	Verify the data to be greater than the value passed.
      	Valid only for numeric fields. <BR>
      	example: if the 
            value should be greater than 10 give validation description as "gt=10" 
      	</td>
      </tr>
      <tr>
          <td><FONT face=Arial size=2>regexp=??? </FONT>
      	</td>
          <td><FONT face=Arial size=2>
      	 Check with a regular expression the value should match the regular expression.<BR>
      	 example: "regexp=^[A-Za-z]{1,20}$" allow up to 20 alphabetic 
       	 characters.      
      	</td>
      </tr>
      <tr>
          <td><FONT face=Arial size=2>dontselect=?? </FONT>
      	</td>
          <td><FONT face=Arial size=2>This 
            validation descriptor is valid only for select input items (lists) 
            Normally, the select list boxes will have one item saying 'Select One' or 
            some thing like that. The user should select an option other than this 
            option. If the index of this option is 0, the validation description 
            should be "dontselect=0"
      	</td>
      </tr>
      </table>
	  <P>
		<table cellspacing="2" cellpadding="2" border="1" width="520">
		<tr>
		    <td>
			<B>NOTE:</B><br>
			The HTML Form Wizard included in JavaScript Coder contains still more 
			number of validations 
			(comparison validations, check box &amp; radio button validations and more)<br>
			Using the wizard, you can add validations to your forms
			without writing a single line of code! <br>
			JavaScript Coder takes care of
			generating the code and inserting the code in to the HTML file.<br>
			<A href="http://www.javascript-coder.com/index.phtml"
			target="_blank">Read more about JavaScript Coder</A>
			</td>
		</tr>
		</table>
	 </P>
	 <A name="8"></A>
	 <h3>Example Page</h3>	
	 See the <a href="example.html" target="_blank"
	 >JavaScript form validation example here</a>
</td>
</tr>
<tr><td align="center">
	<HR><br>
	Copyright &copy; 2003 JavaScript-Coder.com. All rights reserved.
</td></tr>
</table>	
</center>
</body>
</html>
Return current item: Lanai Content Management Framework