Joseph K. Myers
Wednesday, July 16, 2003
This validation script offers a collection of validation functions, and an easy way to use them in your form with JavaScript.
Within a form there are fields for text, and others like selector menus. For some things with only a few possible values it is easy to provide a menu of available options. For others, like zip codes, that would be impossible, and so the easiest way is to use a text field. However, a text field allows anything to be typed, and so many times it is necessary to validate it by determining whether the value is reasonable. A zip code, for instance, would need to be at least five digits, and so five spaces could easily be recognized as an invalid zip code.
A serious concern with this approach is that a validation script sometimes is unable to recognize acceptable values, or that it may be non-functional in some cases. If an error occurred when loading a script in a page, for instance, a customer may be unable to submit the order. In addition, it tends to make security managers forget that malicious users can intentionally disable scripts. Nothing from a form should ever be blindly trusted if a critical area of security might be compromised if an unexpected value was submitted.
The script is written to make validation easy to use. While primarily intended for text fields, it is also applicable to other fields which have pre-programmed values. When working with text fields it is able to validate the field value itself, but when working with other fields it is able to validate the entire field in combination with other fields and functions.
val.js (3,362 bytes) is the basic validation script.
Also in http://www.codelib.net/home/jkm/val.js
The script is not written to instantly install into any form in the world. Rather, it is designed to fit as a component into any large or small part of any form. Two scripts are written like this:
<!-- importing the validation script by Joseph K. Myers -->
<script type="text/javascript" src="val.js">
</script>
<!-- writing a pattern to validate the text fields
in an order form -->
<script type="text/javascript">
order_check = {
firstname:
{ verify: text, message: 'Please enter your first name.' },
lastname:
{ verify: text, message: 'Please enter your last name.' },
address:
{ verify: words, message: 'Please enter your address.' },
city:
{ verify: text, message: 'Please enter your city.' },
zipcode:
{ verify: zip, message: 'Please enter your zip code.' },
telephone:
{ verify: tel, message: 'Please enter your phone number with area code.' },
email:
{ verify: email, message: 'Please enter your email address.' }
};
</script>
Since the simple pattern to validate text fields in a particular form is written in JavaScript, a little bit of JavaScript knowledge is needed. Some HTML knowledge is also needed to use inside of the form itself.
What has been done in those two scripts is to import the val.js script itself into the browser, and to create the variable order_check which shows how to verify each of the form fields.
The field name is before the colon, and inside of the braces are four possible values. The first is "verify," and indicates what kind of verification function is supposed to verify the value of the field. For example, the field in your form which would look like this:
<input type="text" name="email" />
is validated by the part of the script which looks like this:
email:
{ verify: email, message: 'Please enter your email address.' }
The second possible value is "message," and indicates an alert message in case the form field has not validated. This is an optional value because each verification function already has a default error message; however, most will prefer to specify the error message themselves, because the default message will not explain the problem as clearly since it was not written for one particular form.
The third possible value is "filter," which tells the script that when a field has been validated, it should be nicely reformatted, if necessary, so that it contains exactly what is expected. A zip code that was typed as " 44117," for example, will be changed transparently to "44117." Only values that are finished and validated are changed, because otherwise the partially-entered value might be deleted before the user has a chance to finish it. You would set this value in the script by doing this, for example:
zipcode:
{ verify: email, filter: 1 }
The fourth possible value is "force." Ordinarily, if a user has been informed of a possible mistake, and inspected their entry, it is pointless to ask them again and again to fill in a field which they have probably tried to enter correctly. Additionally, there is always a chance that the validation script has made a mistake, and that the user is correct. For these reasons, the validation script won't continue to ask about the same single error.
However, there may be a few cases where a field has to be checked anyway, no matter how unfriendly it is. To do so, you need to specify "force," like this:
telephone:
{ verify: tel, force: 1 }
In each of your forms make sure that you test it to see what happens when you use this option.
To have the validation script be a part of your form, you also must make a certain change to your form. This shows how to put an "onsubmit" event handler into your form which will cause the form to be validated when it is submitted.
<form onsubmit="return validate(this, order_check)"> </form>
Make sure that the name of the variable which you may use instead of "order_check" is the same as the name of the validation pattern which you have written.
It is clear that there may be other things besides onsubmit specified in the form, like its name, and the action which it is posted to. The contents of the form would be between the beginning and ending form tags.
The validate() function will return either true or false depending on whether the form which it is validating contains valid values for all of the fields listed in the validation pattern. The first argument is the form which is to be validated, and the second argument can be any validation pattern for that form.
A greater amount of information can be found at the script's original web page.
http://www.codelib.net/home/jkm/validation.html
Joseph Myers, cookies @ users.sourceforge.net