1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

JavaScript Triggers

Discussion in 'JavaScript and AJAX' started by pradeep, Oct 1, 2005.

  1. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,646
    Likes Received:
    86
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    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:
    <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:
    <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:
    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:
    <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! :D
     

Share This Page