JS Validation Documentation

You should NEVER rely on client-side validation of data entered in a web-based form. Since the validation takes place on the client’s side, it is really out of your control, and thus is not reliable (they could bypass/modify the requirements without your knowledge). On top of that – this library only works with Internet Explorer, so users with a different browser will not have their information validated at all!

Usage

Using this validation library is quite easy, it’s simply a matter of including some custom attributes on your form fields (which will be ignored if you stop using the
library or if it can’t be found).

Configuring The Library

There isn’t anything that you have to set up to use the library, however you can open “validate.js” and edit the following lines if you like;

defaultValidationRule = "free";
defaultErrorPrefix = "The following problem(s) occurred when processing your submission;
defaultErrorMessage = "The value in the '[ELEMENT]' field is invalid.";

These determine the default operations of the library, as well as the prefix to the error message that will be displayed when something doesn’t validate correctly.

In defaultErrorMessage, you can insert [ELEMENT] whereever you want the name of the field that failed to validate to be displayed.

Importing the Library Into a Page

It is very easy to include the validation scripts in a page, the best way is to include code similar to this;

<script language="JavaScript1.2" src="validation.js">
<!--
// -->
</script>

Which will import the script file and run the functions as if they were in the current file.

This process can be automated in dynamic websites by either including that code in a header template for the site, or by creating a simple function such as that below, which works in PHP

 // Dumps in the code to "import" the javascript validation source file
function include_validation($path="") {
echo "<script language=\"JavaScript1.2\" src=\"" . $path . "validation.js\">\n";
echo "<!--\n";
echo "// -->\n";
echo "</script>\n";
}

The other option is to actually copy and paste the entire file into a page and put it between script tags. This is not recommended because it makes it harder to include on multiple pages and if you modify the rules then you need to update each and every file that includes the validation library.

Setting Up a Form for Validation

Before you can validate any field in a form, you need to add the following to the <form> tag that the fields reside in;

onSubmit="return validateForm('[name of the form]')";

OR

onSubmit="return validateForm(this.name)";

So you might end up with something like this;

<form name="accounts" action="POST" action="process.php" onSubmit="return validateForm('accounts');">

This tells the form that when it gets submitted, it needs to run the “validateForm” function before actually submitting data. That is the function that will check for the directives that tell it to validate certain fields.

NOTE: You can also add the code to the submit button of your form, but it is less reliable. To do this, make your submit button something like;

<input type="submit" name="submit" value="Submit Query" onClick="return validateForm('formname');"/>

Validating a Field

On a text input (or <textarea>) for example, you might normally have something like

<input type="text" name="name" value="" size="40"/>

On a page which is using the validation library, you could validate that element to ensure that it only contains text and spaces (a-z, A-Z and ” “) by using the following;

<input type="text" name="name" value="" size="40" validate="true" rule="txt"/>

And if you wanted to make it have a special error message, then you could also include the following in that input tag;

error="You have invalid characters in the Name you entered"

In these special tag attributes, this is what happens;

  1. validate=”true”
    Tells the validation library to check this field for validity.
  2. [optional] rule=”txt”
    Defines which validation rule to use to check the field. If this isn’t specified and validate=”true” is, then defaultValidationRule will be used to validate the field. (see below)
  3. [optional] error=”You have invalid characters in the Name you entered”
    Defines a custom error message to display if this field fails to validate against the rule specified. If no error message is defined, then defaultErrorMessage will be used.
  4. [optional] required=”true”
    Tells the validation script to make sure there is *something* in this field, since the base rules allow blank submissions. This will require that *something* be entered, and then the rule is checkd as well.

You can apply the same principles to a <select> tag, but be careful to remember that the rule applies to the value part of the select, not the text label that the user sees. The “notnull” rule is the best one to use on <select> tags, and have something like below;

<select name="state" validate="true" rule="notnull" error="Please select your state">
<option value="">Select State</option>
<option value="ACT">Australian Capital Territory</option>
<option value="NSW">New South Wales</option>
<option value="NT">Northern Territory</option>
<option value="SA">South Australia</option>
<option value="TAS">Tasmania</option>
<option value="VIC">Victoria</option>
<option value="WA">Western Australia</option>
</select>

this would make an error appear if the user didn’t select a state from the select box, or if they left it highlighting the “Select State” option.

Possible Validation Rules

The following values are valid for the rule=”” portion of a special input tag;

"txt" = Text Only (and spaces)
"num" = Numbers Only (allow decimal)
"int" = Integers only
"phone" = Phone number, (0-9()-+)
"date" = Date Format (dd/mm/yyyy)
"email" = Email addresses
"alnum" = Alpha-Numeric Values
"curr" = Currency ($xxxx..."."xx)
"addr" = Address characters (a-zA-Z0-9-,#)
"name" = Most likely characters in a name (a-zA-Z,.-)
"free" = Freeform text (a-zA-Z0-9+-_()[]/&amp;)
"nobadsql" = Denies harmful SQL syntax (delete|drop|update|replace|kill|lock)
"notnull" = Must enter something
RegExp = Any valid regular expression you may specify within the tag
ie. "/^\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3}$/" = an IP number

You can also define new rules in the “validation.js” file under the “validateField” function. To do this, you need to define the name of the rule under the “switch” statement, and then define the regular expression that would validate to “true” when matched against a valid representation of that string format. This is not reccommended unless you have a firm grasp of JavaScript programming techniques.

Version Changes

2002-01-25

v1.2 public

  • Updated documentation inline and in README.txt
  • Added the following base rules
    • “int”
    • “addr”
    • “name”
    • “nobadsql”
  • Improved/modified these rules
    • “num”
    • “email”
    • “date”
  • Added support for the “required” attribute on validated tags

2001-12-15

v1.1 public

  • Updated documentation and compiled into archive with JS library file

2001-09-26

v1.1

  • Added custom validation rules (define regex once off)
  • Ability to check select fields as well.

2001-09-18

v1.0 (Original Release)

  • Text input validation using the rules
    • “txt” = Text Only (and spaces)
    • “num” = Numbers Only
    • “date” = Date Format (dd/mm/yyyy)
    • “email” = Email addresses
    • “alnum” = Alpha-Numeric Values
    • “curr” = Currency ($xxxx…”.”xx) ($ not req’d)
    • “free” = Freeform text (a-zA-Z0-9+-_()[]/&)
    • “phone” = Phone number, (0-9()-+)
    • “notnull” = Requires that something is entered