A reusable form validator for ASP pages






4.29/5 (7 votes)
Some functions for client side HTML forms validation. Never write them again!
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.