JavaScript Triggers

By pradeep

Author

pradeep ( Team Leader )

Yet to provide details about himself

All articles By pradeep

Recent Articles

Footer SlideUp For Any Website and Any AutoResponder, Started by shabbir in HTML/DHTML - JavaScript/VBScript
How to Load Advertisements Asynchronously, Started by shabbir in HTML/DHTML - JavaScript/VBScript
How to Have Double Color Border Elements?, Started by shabbir in HTML/DHTML - JavaScript/VBScript
VB Script to Compare Two Excel Files with Multiple Tabs, Started by naimish in HTML/DHTML - JavaScript/VBScript
Working on HTML Enities in Javascript, Started by pradeep in HTML/DHTML - JavaScript/VBScript

Similar Articles

Form validation with PHP & JavaScript, Started by pradeep in PHP
Auto Suggest with Javascript, Started by pradeep in HTML/DHTML - JavaScript/VBScript
Timer In JavaScript, Started by pradeep in HTML/DHTML - JavaScript/VBScript

Whenever we write form validation scripts, we usually have to write some code for each of the form elements we have to validate, wouldn't it have been better if we had a generic class which would check the form elements based on a few parameters.This is where JavaScript Triggers come into being, here is an example:
Assume that we have a form consisting of 2 text fields and 1 dropdown select boxes.One test field needs to have only numbers and all others have to filled in or selected.
Here is the HTML for the form:

HTML Code:

<html>
 JavaScript Triggers<head>
 <body>
 <form name="jt" method="post">
 Name: <input type="text" name="nm">
 
 Phone: <input type="text" name="ph">
 
 Age: <select name="age">
 	<option value="none">Select One
 	<option value="18-25">18-25 yrs
 	<option	value="25+">Above 25 yrs
 	 </select>
 
 <input type="submit">
 </body>
 </html>

To use this with JavaScript triggers, we must make a few modifications, here is the modified HTML:

HTML Code:

<html>
 JavaScript Triggers<head>
 <body>
 <form name="jt" method="post">
 Name: <input type="text" name="nm" required=true text="Name">
 
 Phone: <input type="text" name="ph" require=true text="Phone Number" numbers=true>
 
 Age: <select name="age" required=true text="Age">
 	<option value="none">Select One
 	<option value="18-25">18-25 yrs
 	<option	value="25+">Above 25 yrs
 	 </select>
 
 <input type="submit">
 </body>
 </html>

I added the attribute "required=true" so that javascript can understand that the value for this field is required.

The javascript:

Code: JavaScript

function ValidateForm(oForm)
 {
    var e = oForm.elements; 
    for(var i=0;i<e.length;i++)
    {
       if(e[i].type == "text" && e[i].getAttribute("numbers"))
       {
          e[i].onkeypress=function(e)
          {
             var l = this.getAttribute("numbers");
             e=window.event || e;
             keyCode=e.keyCode;
             if(parseInt(l))
             {
          if((keyCode>47 && keyCode<58) && this.value.length
                   return true;
             }
             else
             {
                  if(keyCode>47 && keyCode<58)
                   return true;
             }
             return false;
          };
       }
    }
 
    oForm.onsubmit=function()
    {
       for(var i=0;i<e.length;i++)
       {
       if(e[i].type=="text" && e[i].getAttribute("required") && e[i].value.length<1)
          {
          alert("You cannot leave "+e[i].getAttribute("text")+" field blank");
             return false;
          }
           else if(e[i].type="select-one" && e[i].getAttribute("required"))
          {
          alert("You have to select an option for "+e[i].getAttribute("text"));
             return false;
          }
       }
       return true;
    }
 }

A Sample implementation:

HTML Code:

<html>
 JavaScript Triggers<head>
 <script language="JavaScript">
 function ValidateForm(oForm)
 {
 	var e = oForm.elements; 
 	for(var i=0;i<e.length;i++)
 	{
 		if(e[i].type == "text" && e[i].getAttribute("numbers"))
 		{
 			e[i].onkeypress=function(e)
 			{
 				var l = this.getAttribute("numbers");
 				e=window.event || e;
 				keyCode=e.keyCode;
 				if(parseInt(l))
 				{
 		 	if((keyCode>47 && keyCode<58) && this.value.length
 						return true;
 				}
 				else
 				{
     		    	if(keyCode>47 && keyCode<58)
 						return true;
 				}
 				return false;
 			};
 		}
 	}
 
 	oForm.onsubmit=function()
 	{
 		for(var i=0;i<e.length;i++)
 		{
 		if(e[i].type=="text" && e[i].getAttribute("required") && e[i].value.length<1)
 			{
 			alert("You cannot leave "+e[i].getAttribute("text")+" field blank");
 				return false;
 			}
     		else if(e[i].type="select-one" && e[i].getAttribute("required"))
 			{
 			alert("You have to select an option for "+e[i].getAttribute("text"));
 				return false;
 			}
 		}
 		return true;
 	}
 }
 
 window.onload=function()
 {
     new ValidateForm(document.forms["jt"]); //constructor for the form
 }
 </script>
 </head>
 <body>
 <form name="jt" method="post">
 Name: <input type="text" name="nm" required=true text="Name">
 
 Phone: <input type="text" name="ph" require=true text="Phone Number" numbers=true>
 
 Age: <select name="age" required=true text="Age">
     <option value="none">Select One
     <option value="18-25">18-25 yrs
     <option    value="25+">Above 25 yrs
      </select>
 
 <input type="submit">
 </body>
 </html>

This helps in code re-use & implementing the same code for multiple forms. This is just for basic validation, you can surely enhance the idea.
Happy re-coding!

Article Tools	Search this Article
Show Printable Version Email this Page	Search this Article: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode
Bookmarks
Add to del.icio.us Add to Google Digg it Add to Yahoo ! Add to Windows Live

Currently Active Users Reading This Article: 1 (0 members and 1 guests)