What it's all about
When writing a web application using ASP, you often have to create HTML based input forms for all sorts
of data. E.g. user registration pages, questionnaires, data capture templates and so on. Most of the time
this data is the further processed and stored somewhere, usually in a database.
To make sure that only valid data is entered, some checks should occur before it is stored somewhere.
Valid means here reasonable in the current context (e.g. no birthdays in the future) as well as
suitable for the data store, like limitations in length or data type.
This validation can take place on the client side via JavaScript or on the server within the receiving
Active Server Page. Both have well known advantages and disadvantages. This article contains a method for
the JavaScript variant.
Writing the same code again and again
As I wrote various web applications during the last years I had quite often the feeling that I'm doing
the same stuff again and again, and actually it was more or less the same. After reusing my old stuff
with cut-and-paste a couple of times I decided to build a more general solution, that can be used in all upcoming
projects.
The mission objectives
- Write once use everywhere
- No dynamic code generation (ASP scripts that generate client side JavaScript.....)
- Separate JavaScript code from HTML (move it into a separate file)
- Browser independent
The solution
As I ruled out dynamic code generation, I had to come up with a trick to make the validation code independent
of the names of the input fields and to provide the functionality to be able to check only some of the fields.
This is the important point of the solution, as the input fields can be accessed
from JavaScript via their names or their indices. Both may vary.
<script language="JavaScript" src="/formvalidator.js"></script>
<form name="RegisterUserForm" action="register.save.asp" method="post"
OnSubmit="return CheckForm(document.RegisterUserForm);">
Logon Name: <INPUT TYPE="TEXT" NAME="logon_name" VALUE="">
<INPUT TYPE="HIDDEN" NAME="CHK_logon_name" VALUE="STR|5|255|True|Logon name">
</form>
So what are we doing here? The first two lines are more or less stratight
forward. Include the JavaScript file
that contains the form checker code and include an OnSubmit event handler. The interesting part is the last hidden
input field. It contains instructions for the form checker. In this case they are:
- The field to be checked has the name logon_name
- It's a string value
- Minimum of 5 characters
- Maximum of 255
- It's a mandatory field
- The friendly name (for the error message) is Logon name
For strings it's not too far beyond what HTML can do for you right out of the box. Basically only the enforcement of mandatory
fields and the minimum string length are enhancements. It gets more interesting when it comes to numeric values and dates.
According to the features for strings the form checker checks these values for numeric values (integers and floats):
- Minimum and maximum values (not character length)
- Validity of the string. Only numeric characters are allowed.
And for dates:
- Validity of the string. Format of the string
- Minimum and maximum date
- Validity of the date (e.g February 30th is not allowed)
So what the CheckForm function actually does, is to go through all form elements of the form passed as parameter.
It the looks for the CHK_ prefix and interprets the values as instructions to check the content of the
corresponding field.
Some further thoughts
The beauty of the solution lies in the fact, that you don't further mess up your ASP code with JavaScript stuff.
But there is more. What if you would generate all the input fields automatically, let's say from some meta data that
describes the design of your data store? So your ASP page would just create all the necessary input fields and
- as it has the data type information right at hand - the hidden fields for the validation check. Then you get the proper
checking routines for free.
