Form validator and Form submission in the DHTML Suite

First name:		required
Last name:		required
Address:		Required
Zip code:		mask="numeric", minLength="4"
Age:		mask="numeric", minLength="2"
Email:		mask="email"
Repeat email:		mask="email", equalTo="email"
Url:		mask="domain"
Alpha chars:		mask="letter"
Code:		freemask="NNNN-SS" (Example: "1234-AB"), caseInsensitive="1"
Code 2:		regexpPattern="^[Jj]avascript$"
Country:		Norway Denmark Sweden United Kingdom United States Required
Comments:		No validation attributes
Gender:		Female Male
Hobbies: Required		Computer games Soccer Stamps Shopping
		I agree

You can choose if and how you want to indicate errors in the form. Here, I'm using images and css.

The submit button will be enabled when all the form is validated. This is done by callback functions.

To specify how to validate inputs, custom attributes has been assigned to the input tags. Example:

<input type="text" name="age" id="age" required maxlength="3" size="3" mask="numeric" minlength="2">

The images indicating valid and invalid inputs are inserted into empty elements on the page:

<tr>
	<td>Gender:</td>
	<td id="_gender"></td>
	<td>
<input type="radio" required name="gender" value="F" id="genderFemale"> <label for="genderFemale"> Female</label>
<input required type="radio" name="gender" value="M" id="genderMale"> <label for="genderMale">Male</label></td>
</tr>
		

Notice the id "_gender" correspond with the name of the input "gender". The "_" prefix tells the script that the validation image could be inserteded here.