Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   JavaScript Triggers (http://www.go4expert.com/articles/javascript-triggers-t452/)

pradeep 1Oct2005 17:06

JavaScript Triggers
 
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! :D


All times are GMT +5.5. The time now is 14:29.