[Javascript OOP] - Easy Form Validation

**the182guy** · Nov 14th, 2008, 09:04 PM

Introduction
This is an Object Oriented Javascript form validation framework. I created this because I have written countless forms which require client side validation, each time I did a form I found myself copy and pasting a simple Javascript into the page to do basic form validation.

I designed this component to be very easy to use, easy to add to existing forms and require very little code from the programmer. Whilst creating this I also had the W3C web standards in mind, so you will find that it will not cause your page to fail a W3C validation test.

Below I will explain everything about the Validator, but be sure to download the samples attached which you can play around with.

Simple Usage
To use the basic functionality all you have to do is include the classes in the page you want to use it on. All the classes are inside the easy_validation.js file.

javascript Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Easy Form Validation</title>
 
<script type="text/javascript" src="easy_validation.js"></script>
<script type="text/javascript">
    
    function validate()
    {
        var v = new Validator(); //create a new Validator object called v
        
        //setup the fields we want to validate
        
        //          NAME                VALIDATION      ELEMENT ID
        v.addField("Your Number",       "NUMBER",       "my_number");
        v.addField("Your Date",         "DATE",         "dob");
        v.addField("Your Text",         "NOT_EMPTY",    "line1");
        v.addField("Email address",     "EMAIL",        "email");
        v.addField("Terms",                       "CHECKBOX",       "terms");
        
        //call the validateForm method and return the result to the form element
        return v.validateForm();
    }
    
</script>
 
</head>
 
<body style="font-size:13px;font-family:Arial, Helvetica, sans-serif;">
 
<h1>Simple Usage</h1>
 
<form name="contact_us" method="post" action="simple_example.html" onsubmit="return validate();" />
Enter a number: <input type="text" id="my_number" value="89" /><br />
Enter a date: <input type="text" id="dob" value="01/01/2008" /><br />
Enter some text: <input type="text" id="line1" value="abcdefg" /><br />
Email address: <input type="text" id="email" value="[email protected]" /><br />
Do you accept our terms? <input type="checkbox" id="terms" />
 
<input type="submit" name="submit_button" />
</form>
 
</body>
</html>

The example above will produce a popup with the list of validation errors (if any). The only special things about the form are that each element has ID which is needed for the Validator to pickup the field, and the onsubmit event of the form element. That event tells the form to call our validator function when submitted, if it fails the validation tests, the form will not be submitted.

We create a function called validate in the head section of the page, which is where we set the parameters for the Validator object.
The addField method is self explanatory, however I will explain each of the arguments:

addField(NAME, VALIDATION_TYPE, ID, CUSTOM_ERROR_MESSAGE)

NAME – This can be anything, it is only used when showing the default error message. This is not the actual name property of the element.
ID - The element ID of the field to validate
CUSTOM_ERROR_MESSAGE - This is optional, if set it will override the default error message
VALIDATION_TYPE – tells the Validator what validation to do on that field.

Current list of validation types supported

NUMBER – data must be numeric (can be decimal/float).
DATE – data must be a date in format dd/mm/yyyy.
BASIC – data must be at least three characters long.
NOT_EMPTY – data must exist, can not be blank.
EMAIL – data must appear to be a valid email address.
NAME – data must only cantain alphabetic characters, no numbers or symbols.
CHECKBOX – used on a checkbox/tickbox field, the checkbox must be ticked.

You can also change the default error message for all fields by using the setDefaultErrorMsg(“ERROR MESSAGE HERE”) method.

Thread: [Javascript OOP] - Easy Form Validation

Thread Tools

Display

Threaded View

[Javascript OOP] - Easy Form Validation

Posting Permissions