JavaScript Form Validation Framework

This framework was created several years ago when I realized I had to write JavaScript Form Validation over and over again, I then pulled together all the generic validations that you normally perform on a form and I created several JavaScript ob ects that perform the validation for you based on the information you provide to it! The framework has evolved drastically over the years and is now mature enough to be released to the public to use for free under the "#$ license! The code is freely available for download from http%&&code!google!com&p& avascriptformvalidation& Should you have any problems obtaining a copy of the code ust email me on taco!fleur'clickfind!com!au Participation in improving the code and working out any bugs is very much appreciated!

Index JavaScript Form Validation Framework!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!( )ow does it work*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!+ JavaScript Includes!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!+ Form elements this framework deals with!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!, Type of checks performed on the form elements!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!, Input type te-t!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!, Input type password!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!, Input type file!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!, Select one!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!, Select multiple!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!, .adio!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!/ 0heckbo-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!/ Te-tarea!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!/ Values!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!/ 0hecks performed!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!/ $ser defined functions!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 Form!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 2roperty!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1

How does it work?

In simple terms, the validation framework works by including the re3uired JavaScript include files, defining the form fields to validate and constraints, and then have the framework to handle the validation for you upon submit! In more advanced terms, you create form2roperty ob ects upon which you define the name of the field it corresponds to and define constraints for the form field! $pon submit the framework loops over all form2roperties that were created and validates each one of them, a custom function on the page then defines what to do with any errors! 4n alternative to defining the form2roperties inline is to define an 567 file that defines the properties and constraints!

JavaScript Includes
The following JavaScript includes are re3uired to make the framework work
<script src="/_resource/script/validation/v3.4/pacificfox.js"></script> <script src="/_resource/script/validation/v3.4/validation.js"></script>

pacificfo-! s defines a namespace for the framework and the version of the framework to use! validation! s dynamically writes code to include further JavaScript include files that are re3uired for the framework to work, they are% 8 string! s 8 error! s 8 property! s 8 form2roperty! s 8 form! s 8 message! s string.js adds some e-tra functionality to the native String method of JavaScript error.js manages all errors that are reported property.js is a super class to define basic methods for a property formProperty.js is a sub class of property! s and deals with the form fields form.js is the first ob ect created and maintains a collection of all form properties created message.js will be used to maintain custom error messages

Form elements this framework deals with

This framework deals with the following form elements% 8 input type te-t 8 input type password 8 input type file 8 select one 8 select multiple 8 radio 8 checkbo8 te-tarea

Type of checks performed on the form elements

Following are the type of checks performed on the form elements!

Input type text

The framework checks for 8 if it9s a re3uired field does it have a value o if it has a value does it meet minimum length o if it has a value does it not e-ceed ma-imum length

Input type password

The framework checks for 8 if it9s a re3uired field does it have a value o if it has a value does it meet minimum length o if it has a value does it not e-ceed ma-imum length

Input type file

The framework checks for 8 if it9s a re3uired field does it have a value o if it has a value does it meet minimum length o if it has a value does it not e-ceed ma-imum length

Select one
The framework checks for 8 if it9s a re3uired field is a selection made, a selection is defined as an option with a value other than nothing

Select multiple
The framework checks for 8 if it9s a re3uired field is a selection made, a selection is defined as an option with a value other than nothing

Work to do: create a check that allows the user to define the number of selections required, or a range.

Radio
The framework checks for 8 if it9s a re3uired field is a selection made, a selection is defined as a radio bothat is checked

Checkbox
The framework checks for 8 if it9s a re3uired field is a selection made, a selection is defined as a checkbothat is checked Work to do: create a check that allows the user to define the number of selections required, or a range.

Textarea
The framework checks for 8 if it9s a re3uired field does it have a value o if it has a value does it meet minimum length o if it has a value does it not e-ceed ma-imum length

Values
4ny values can be checked against the following 8 whether it contains invalid characters 8 whether it is correctly formatted 8 whether the numerical value is in a valid range :multiple ranges can be defined;

Checks performed
Following are the type of checks performed during validation 8 is a value re3uired 8 is a value present 8 is a selection made 8 are minimum length re3uirements met 8 are ma-imum length re3uirements met 8 are invalid characters present 8 is the format correct 8 is the range valid Work to do: date checks need to be added.

User defined functions

<ach property can have a user defined function assigned for the following error events 8 onerror 8 onvalidate The user defined functions are e-ecuted if the property has an error or validates! The second argument passed to the user defined function is the 2roperty ob ect itself!

Form
4 global JavaScript variable is re3uired to hold a reference to the Form ob ect! <-ample
var oForm1;

4 new Form ob ect needs to be created for each form that you want to validate! <-ample
oForm1 = ne !"#$F$#F%&.Form' ( form$dentit)*"m)Form"+ displa),rror*false - .;

formIdentity is a string reference to the id of the form to validate displayError is a =oolean value indicating whether the framework is to handle the display of any errors or not, if set to true the framework will output any errors with a JavaScript alert!

Property
To add properties to the form you call the add2roperty method on the Form ob ect! <-ample property > oForm(!add2roperty: ? name%@business#ame@ , friendly#ame%@=usiness name@ , re3uired%true , minimum7ength%+ , ma-imum7ength%/A , trim%true B ;C

This documentation is bare bones and all functions and arguments need to be documented!