Web-MA JavaScript Form Validator

Current Version: 1.0.5 relesead on 02/02/2007

The validations has been made easy!


This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

The GNU license to which this software is referering is available at: http://www.gnu.org/licenses/gpl.txt

If you want, you can add a link to www.web-ma.com, making it easy for others to recognize the author of this script.


Why my own validator?

The idea to develop this validator suite comes using the ASP.Net framework.
Unfortunately after some days of use, I've completely refused the idea to continue to waste time after the WebForm and the logic behind that.
So, accordingly to previous experience mutued by years of experience in old ASP language, I've decided to take the best of the ASP.Net framework idea and merge with it.

The result is my own validator.

Certainly it has its own limit, that unfortunately is imposed by the user's browser configuration.
In few words, this mean that if Javascript isn't enabled on the browser, the validator never works, and this mean that all tests will passly without exception.
This require some extra work for the programmer to create some server side validation rules.
But if you think well (and in particularly if you have a bit of experience in ASP.Net programming) its the same thing that occur on the framework when you hit the submit button. In that case is the server that just re-parsing the coded logic, using its interal architecture perform the validation also (or only, if a downlevel browser is detected) in a server side way.
So this could seem expensive to implement, but actually I prefer this to the many hours lost after Page_OnInit or Page_Load event and Request.Form collection returned empty.
To believe, just take a look to the example below.

Why use this validator?

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.
This mean create a lot of code, functions etc spreaded along HTML pages or create specialized .js files that let you validate single forms along your web site.

The JavaScript class presented here makes the form validations many times easier.

The idea is to create a set of validator associated with each element in a form. The validation is nothing that a specialized function that perform the type of validation requested.

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

You can associate a set of validator for each input field in the form and forget of all, worrying just to catch the submit result.

For each single validator, you will able to set, a part the basic parameters, the error message, the location where it will be displayed, the CSS style and if the field should get the focus after a wrong validation.

Using The Script

1. Include validator.js in your html file just before closing the HEAD tag

<script src="validator.js" type="text/javascript"></script>

2. Just after defining your form, create a form validator object passing the name of the form:

 <FORM name='myform' action="">
 <!----Your input fields go here -->
 </FORM>
 <SCRIPT language="JavaScript">
 var frmvalidator  = new Validator("myform");
....


3. Now add the validations required

frmvalidator.AddValidator("FirstName", RequiredFieldValidator, "0", " this is a required field", "right", true, "color:red;fontFamily:Verdana;fontSize:12pt;");

A) The first parameter is the name of the field;
B) The second parameter is the validation function to be call during the validation process.
C) The third parameter is an extra param is used to pass an extra param value to the validator function.
D) The fourth param is the message.
E) The fifth param is the location where the message will be displayed. Choose from right, left or alert.
F) The sixth param is the CSS style that will be applyied to the validator message.
Here the CSS should be passed in a Javascript form style, so you must "camelize" all params and remove all hyphen.
For instance a CSS property like font-size will became fontSize, and so on.

4. You can add any number of validations where validation is required.

5. Don't forget to add the ID property to the HTML element to be validated.

That's it! You are ready to go.

Example

The example below will make the idea clearer
<form action="" name="myform" >
<table cellspacing="2" cellpadding="2" border="0">
<tr>
  <td align="right">First Name</td>
  <td><input type="text" name="FirstName" id="FirstName" /></td>
</tr>
<tr>
  <td align="right">Last Name</td>
  <td><input type="text" name="LastName" id="LastName" /></td>
</tr>
<tr>
  <td align="right">EMail</td>
  <td><input type="text" name="Email" id="Email" /></td>
</tr>
<tr>
  <td align="right">Phone</td>
  <td><input type="text" name="Phone" id="Phone" /></td>
</tr>
<tr>
  <td align="right">Address</td>
  <td><textarea cols="20" rows="5" name="Address"></textarea></td>
</tr>
<tr>
  <td align="right">Country</td>
  <td>
  <SELECT name="Gender" id="Gender">
<option value="" selected>[select one of these]</option>
<option value="M">Male
<option value="F">Female
 </SELECT>
</td>
</tr>
<tr>
  <td align="right"></td>
  <td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
<script type="text/javascript">
 var frmvalidator = new Validator("myform");
 frmvalidator.AddValidator("FirstName", RequiredFieldValidator, "0", " campo richiesto", "right", true, "color:red;fontFamily:Verdana;fontSize:12pt;");
 frmvalidator.AddValidator("FirstName", MaxLengthFieldValidator, "5", " campo troppo lungo", "right", true, "color:blue;fontFamily:Verdana;fontSize:12pt;");

 frmvalidator.AddValidator("LastName", RequiredFieldValidator, "0", " campo richiesto", "right", true, "color:red;fontFamily:Verdana;fontSize:12pt;");
 frmvalidator.AddValidator("LastName", AlphaNumericFieldValidator, null, " campo errato", "right", true, "color:red;fontFamily:Verdana;fontSize:12pt;");

  frmvalidator.AddValidator("Email", RequiredFieldValidator, "0", " campo richiesto", "right", true, "color:red;fontFamily:Verdana;fontSize:12pt;");
  frmvalidator.AddValidator("Email", EmailFieldValidator, null, " campo non valido", "right", true, "color:red;fontFamily:Verdana;fontSize:8pt;");
</script>

Some notes

  • The form validators should be created only after defining the HTML form (only after the </form> tag. )
  • 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.
  • You can't associate a javascript function to the onsubmit event of the form if you are using this validator script. This is because the validator script automatically overrides the onsubmit event. If you want to add a custom validation, add an ExtraValidatorFunction (see the section below)
  • Adding an Extra Validator Function

    If you want to add an extra custom validation function just before the final submit, you can simply create your own function with your own name, but without parameters. Then using the ExtraValidatorFunction of your form validator object, pass the name of the function that will take the extra validation, and that's all.

    The extra function can obviously contain all code that you need, including extra function call to extra function that contains parameters.
    The important thing is to remember that function should just return true or false as well as the other validation functions do.

    To associate the validation function with the validator object, use this command:
    frmvalidator.ExtraValidatorFunction("YourCustomValidationFunction");

    Clear All Validations

    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.

    frmvalidator.clearValidators();

    This function clears all validations you set.
    You will not need this method in most cases.

    Table of Validator Functions

    A small set of valitor functions has been released with this first version of the code. You are free to add your own set as well as extend the provided one.

    The validator provided are:
    • RequiredFieldValidator
    • MaxLengthFieldValidator
    • CompareFieldValidator
    • CheckBoxFieldValidator
    • NumericFieldValidator
    • AlphaFieldValidator
    • AlphaNumericFieldValidator
    • SelectedIndexFieldValidator
    • EmailFieldValidator

    Example Page

    See the Web-MA JavaScript form validation example here

    Back to Open Source Utility list.


    Copyright © 2006 - 2008 http://www.web-ma.com. All rights reserved.