Generic Form Validation

The holy grail of development, writing a piece of code that you can just drop into any application and run with. Well here is my attempt at writing a javascript that would handle form validation on the fly. And well even if I say so myself it has come in pretty handy and though it’s not suitable for all cases, e.g. where there are two forms on one page, it handles everything else pretty well.

So what does it do? and how does it work? The script comes in 2 parts. The first being c_validate.js. This is the script that handles the bulk of the form validation. It works by looping over all the form fields on a given page. Then it determines what type (text, password, select [single and multiple]) it is and based on that executes a set of validation rules. The validation checks it does are:

Specify which fields are required and which are optional
Standard empty/blank form fields
Validates e-mail addresses
Checks for matching passwords (where applicable)
Checks for numeric values where specified
Checks that numeric values are between a set range
Checks dates*
Uses the form field name for the error message
Display a dHTML error message (IE only)

*The date checking bit comes in the form of a script called _date.js, which was written by someone else, a chap called Michael

If the content of you form breaks any of the validation rules then in IE it dynamically displays a message near the offending form field and in Netscape pops up an alert dialogue box (I have yet to get the dHTML bit too work, but I will). Any errors will stop the form from submitting. So how do you implement it? It’s very simple, in the header section of the page you want to validate add the following two javascript statements (the ones in bold):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript1.2" type="text/javascript" src="js/_validate.js"><script>
<script language="JavaScript1.2" type="text/javascript" src="js/_date.js"></script>
</head>

Where js/ is the directory where the two files reside. Next in your <form> tag, add the attribute onSubmit with a value of return verify(this);, like such:

<form action=”your_page.html” method=”post” name=”your_form_name” id=”your_form_name” enctype=”application/x-www-form-urlencoded” onsubmit=”return verify(this);”>

Now in order for the dHTML validation messages to appear you need to add a <span> tag with an attribute id that has a value of elField0, where the 0 is for your first form field. You repeat this for the next form field, but give it an id of value elField1 and so on and so forth for for each and every form field on the form always incrementing the value by 1. This will look like such:

As I mentioned above you can specify which form fields are required and which are optional. You do this by pre pending either r_ for required or o_ for optional to your form field name. Just look at the example above and you will notice that both form fields are required, because the form field names are: r_first_name and r_surname. If you wanted to make the first name field optional, simply label it: o_first_name. A question that might come to your minds is: “If my form field is optional do I need to include the <span> tag with an incremented elField?”. The answer is no, you don’t have to include it, but you still need to increment the elField, see the example below, where the phone entry is optional:

First Name: <input type=”text” name=”r_first_name” id=”r_first_name” size=”20” value=”“><span id=”elField0”></span>
Surname: <input type=”text” name=”r_surname” id=”r_surname” size=”20” value=”“><span id=”elField1”></span>
Phone: <input type=”text” name=”o_phone” id=”o_phone” size=”20” value=”“>
E-mail: <input type=”text” name=”r_email” id=”r_email” size=”20” value=”“><span id=”elField3”></span>

Now I also mentioned in my list of things that this script does, that it uses the form field name submitted to generate the error message. So using our aforementioned First name input box, the script would grab r_first_name, strip off the r_ and replace the “_” with a white space and concatenate it with the standard error message: ”You need to specify a first name”. Marvellous. In Netscape’s case it does the same thing but appends it a list that will populate the alert box.

That’s pretty much all there is to doing checks for not completed form fields. But you can do a little more. If you want to check that the user has entered a valid e-mail address, make sure the form field name a) has the r_ pre pended and b) contains the word email, for example r_email_address. Similar thing for dates. Again pre pend the r_ and include the word date. Please note that this kind of check is only performed if the input box is of type ”Text”. If you would like to validate matching passwords, you have to name the first input field r_password and the second r_verify_password.

Well that’s about it. It’s not totally generic and relies heavily on your form field naming convention, but if that is not a problem then this might help you out. Below I have listed some of the issues with this script and stuff that is planned for it. And here you can download the script and this page. Finally I’d briefly like to thank a few people, who have helped out developing this form, by either using it, contributing or juts plain testing it. Special thanks goes out to Werner, Istvan and Michael.

Ok the quirks…

Netscape 4.78, insists on validating every text field for a numeric field.
Macs and Netscape well there would have to be a quirk and that is the limitation of 255 characters for the alert dialogue, so Mac developers beware of long forms.

Future additions:

dHTML for both Netscape 4.7x and 6.x.
Group check box validation.
Credit card numbers
And whatever else anyone else can think of.

Greg's Blog

helping me remember what I figure out

Generic Form Validation