Click here to Skip to main content
Click here to Skip to main content

Extendable JavaScript Validation Routines

By , 15 Jun 2006
Rate this:
Please Sign up or sign in to vote.

Introduction

I posted my nice basic C# RegEx validator onto CodeProject to rave reviews (two people voted it 1 out of 5). Spurred on by this vote of confidence, I thought I'd publish a JavaScript validation system that I find handy. So here goes. We all know we should validate our controls client-side to save on post backs. This is easy for .NET, but becomes a little more cumbersome when using something like PHP.

The code

Firstly, here is the meat of the thing:

<script type="text/javascript" language=""javascript"" 
        xsrc="validate.js" mce_src="validate.js" ></script>
<script type="text/javascript" language=""Javascript"">
<!-
//Create an array of ControlDetails that need validating.
//Format(elementid,required,maxlength,minlength,email,decimal,nonnegdecimal)
var controlsToValidate = new Array(
/* Name is required has no max must be longer than 3 characters*/
  new ControlDetail('txtName',1,-1,3,0,0,0),
/* Age is not required but must be a non negative number */
  new ControlDetail('txtAge',0,-1,-1,0,0,1),
/* IQ Required but can be negative */
  new ControlDetail('txtIQ',1,-1,-1,0,1,0),
/* Email required must be under 20 characters */
  new ControlDetail('txtEmail',1,20,-1,1,0,0)
) 
//->
</script>

This sits in the head of your web page. The controlsToValidate array is an array of the controls that you want to validate. Each item in the array is a ControlDetail object which consists of:

  • elementid
  • required
  • maxlength
  • minlength
  • email
  • decimal
  • nonnegdecimal

This object is defined in the "validate.js" script file, which we'll get to later. As you can see, for nearly all of the attributes of the ControlDetail object, you can set it to 1 for true and 0 for false, except the minlength and maxlength, which require -1 for ignore and a number to work. Anyway, the current controls are configured as their commented descriptions indicate.

So further down the HTML, we have our controls:

<form name="form1″ method="post" action="" 
      onSubmit="return Validate(controlsToValidate);"><div class="row">
<div class="label">Name:</div>
<div class="input"><input id="txtName" name="Name" type="text" size="30″>
</div>
</div>
<div class="row">
<div class="label">Age:</div>
<div class="input"><input id="txtAge" name="Age" type="text" size="5″ maxlength="5″>
</div>
</div>
<div class="row">
<div class="label">IQ:</div>
<div class="input"><input id="txtIQ" name="IQ" type="text" size="30″>
</div>
</div>
<div class="row">
<div class="label">Email Address:</div>
<div class="input"><input id="txtEmail" name="Email" type="text" size="30″>
</div>
</div>
<div class="row">
<div class="label">
<input type="submit" accesskey="s" class="submit" value="Save" title="Save Details">
</div>
</div>
</form>

You will notice that I've given them all an ID which is used later with document.getElementByID, and a name which is also used later to describe the control in the error message. Also, there is the OnSubmit function which calls our main validation routine and passes in the array we made earlier.

OK, so this is what the validator.js file looks like:

/*
This is the source code for the validation routines. 
Please feel free to augment, fix, change, 
use where-ever you want.***Do Not Delete***
File: validate.js
Author: Chris Davey
Version: 1.0
Email: chris.davey@chemlock.co.uk
Web: www.chemlock.co.uk
***End Do Not Delete*** 
Please visit my site for more info, examples and versions (www.chemlock.co.uk)
*/
//Controls that require validating can be put into this object
function ControlDetail ( elementid, required, maxlength, 
         minlength, email, decimal, nonnegdecimal, ipaddress)
{
    this.elementid = elementid;
    this.required = required;
    this.maxlength = maxlength;
    this.minlength = minlength;
    this.email = email;
    this.decimal = decimal;
    this.nonnegdecimal = nonnegdecimal;
    this.ipaddress = ipaddress;
}

//** All Validation Functions **
function ContainsValue(element)
{
    return document.getElementById(element).value.length != 0;
}
function IsOverMaxLength(element,maxlength)
{
    return document.getElementById(element).value.length > maxlength;
}
function IsUnderMinLength(element,minlength)
{
    return document.getElementById(element).value.length < minlength;
}
function RegExTest(element,expression)
{
    return element.value.match(expression) != null;
}
function IsEmail(element)
{
    var emailRE = "([a-zA-Z0-9_\\-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]" + 
                  "{1,3}\\.)|(([a-zA-Z0-9\\-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})";
    return RegExTest(element,emailRE);
}
function IsDecimal(element)
{
    var decimalRE = "^(\\+|-)?[0-9][0-9]*(\\.[0-9]*)?$";
    return RegExTest(element,decimalRE);
}
function IsNonNegDecimal(element)
{
    var nonnegdecimalRE = "^[0-9][0-9]*(\\.[0-9]*)?$";
    return RegExTest(element,nonnegdecimalRE);
}
//** End All Validation Functions **

//** Main Validation Routine **
function Validate(controlsToValidate)
{
    valid = true;
    var message = "Warning:\n\n";
    for(var i = 0;i < controlsToValidate.length;i++)
    {
        if(controlsToValidate[i].required == 1)
        {
            //Validate that a value has been entered
            if(ContainsValue(controlsToValidate[i].elementid) == false)
            {
                valid = false;
                message += document.getElementById(
                  controlsToValidate[i].elementid).name + 
                  " is required.\n";
            }
        }
        if(controlsToValidate[i].maxlength != -1)
        {
            //Validate that the value is not over max
            if(IsOverMaxLength(controlsToValidate[i].elementid, 
                               controlsToValidate[i].maxlength) == true)
            {
                valid = false;
                message += document.getElementById(
                           controlsToValidate[i].elementid).name + 
                           " is to long.\n";
            }
        }
        if(controlsToValidate[i].minlength != -1)
        {
            //Validate that the value is not under min
            if(IsUnderMinLength(controlsToValidate[i].elementid, 
                                controlsToValidate[i].minlength) == true)
            {
                valid = false;
                message += document.getElementById(
                           controlsToValidate[i].elementid).name + 
                           " is to short.\n";
            }
        }
        if(controlsToValidate[i].email == 1)
        {
            //Validate that the value is an email
            if(IsEmail(document.getElementById(
                       controlsToValidate[i].elementid)) == false)
            {
                valid = false;
                message += document.getElementById(
                           controlsToValidate[i].elementid).name + 
                           " is not a valid email address.\n";
            }
        }
        if(controlsToValidate[i].decimal == 1)
        {
            //Validate that the value is decimal
            if(IsDecimal(document.getElementById(
                         controlsToValidate[i].elementid)) == false)
            {
                valid = false;
                message += document.getElementById(
                           controlsToValidate[i].elementid).name + 
                           " is not a decimal.\n";
            }
        }
        if(controlsToValidate[i].nonnegdecimal == 1)
        {
            //Validate that the value is decimal
            if(IsNonNegDecimal(document.getElementById(
                     controlsToValidate[i].elementid)) == false)
            {
            valid = false;
            message += document.getElementById(
                       controlsToValidate[i].elementid).name + 
                       " is not a positive decimal.\n";
            }
        }
        if(controlsToValidate[i].ipaddress == 1)
        {
            //Validate that the value is decimal
            if(IsIpAddress(document.getElementById(
                           controlsToValidate[i].elementid)) == false)
            {
                valid = false;
                message += document.getElementById(
                           controlsToValidate[i].elementid).name + 
                           " is not an IP Address.\n";
            }
        }
    }
    if (valid == false)
    {
        alert (message);
    }
    return valid;
}
//** END Main Validation Routine **

It's not as complicated as it looks, or if you have a fair understanding of JavaScript, it is as simple as it looks. Basically, the routine loops around the array and processes the element according to the validation you specified. Obviously, it's simple to add more validation routines to fit whatever your requirements are. At the top of this file, you can see the code for the ControlDetail object. Maybe not the best name, but I was in a hurry, story of a developer's life. Let me know what you think. Improvements etc. I'm sure you will. Please remember to check out my blog / site: www.chemlock.co.uk.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Cheml0ck
Web Developer
United Kingdom United Kingdom
Have been working with computers since the early 80's when our junior school got a BBC Micro. Every since then I've been building, fixing, configuring, installing, networking, coding and designing with them. At present I mainly code web applications in C#/ASP.NET. I'm very interested in Design Patterns and try and use these generic principles in all new projects to create truly n-tier architectures. You can keep up on current affairs on www.steelcurve.com


Ok so the pictures not of me, it's my little girl who makes coding everyday worth while. I just hope she becomes a lawyer not a developer.

Comments and Discussions

 
GeneralNot bad Pinmemberjmiller80815-Jun-06 12:45 
GeneralRe: Not bad PinmemberCheml0ck15-Jun-06 20:48 
GeneralRe: Not bad Pinmemberjmiller80819-Jun-06 4:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140421.2 | Last Updated 15 Jun 2006
Article Copyright 2006 by Cheml0ck
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid