Form Validation on Steroids - Add-On Version
Download Script
About the Program
Basic Version Configuration/Download
Configuring your Form for the Add-On Version
This version works exactly like the basic version except it has added functionality. If you've not yet read the directions for configuring for the
basic version, do so before attempting to add these features.
Each add-on is assumed to be a required field except the email field - it can be either, see notes. Although the output of the program validates as XHTML 1.0, you may write your original form as XHTML or HTML 4, it will not cause problems with the program either way.
Currently the add-ons version of Form Validation on Steroids performs extra validation for the following:
Email Field
Email field checks address for the form, "x@x.x", where x represents at least one character in that position. The field can be either required or not. If it is not marked as required and it is left empty, it will not be re-written. It is only re-written as a non-required field if user has entered an address using an incorrect format. The form field must be named, " email" (NOT case sensitive,
non-required name must include space as first character) or "*email" if required. Dashes are not permitted in the name.
<input type="text" name=" Email">
OR
<input type="text" name="*Email">
Phone Fields
Scripting for the phone fields re-write fields as 3 seperate text fields. The standard 3 digit area code, 3 digit prefix, and 4 digit suffix fields do not accept non-numeral characters. The script manually sets size and maxlength of text fields for NN 4.x - other browsers read/copy this from the elements themselves. If any of the 3 fields are left empty, all 3 are re-written with the previously entered values "remembered" so the user does not have to re-enter anything. Fields must be marked as required, and names must be "*Phone", with a capital "P".
<input type="text" name="*Phone" size="4" maxlength="3" onkeypress="return checkIt(event)">
<input type="text" name="*Phone" size="4" maxlength="3" onkeypress="return checkIt(event)">
<input type="text" name="*Phone" size="5" maxlength="4" onkeypress="return checkIt(event)">
City, State, ZIP Fields
City and ZIP fields are text inputs, the states are stored in a select menu. ZIP field does not accept non-numerical characters, manually sets size of text fields for NN 4.x - other browsers read/copy this from the elements themselves. If any one element of the 3-element combo is missing a value, all 3 are re-written with any previously entered value "remembered" by the program. Name must be, "*City, State, ZIP", case-sensitive, and the ZIP field should include the event handler and JavaScript expression (re-written ZIPs will automatically include those).
<input type="text" name="*City, State, ZIP" size="25">
<select name="*City, State, ZIP">
<option value="State">State
<option value="AL">AL<option value="AK">AK<option value="AZ">AZ<option value="AR">AR<option value="CA">CA<option value="CO">CO<option value="CT">CT<option value="DE">DE<option value="DC">DC<option value="FL">FL<option value="GA">GA<option value="HI">HI<option value="ID">ID<option value="IL">IL<option value="IN">IN<option value="IA">IA<option value="KS">KS<option value="KY">KY<option value="LA">LA<option value="ME">ME<option value="MD">MD<option value="MA">MA<option value="MI">MI<option value="MN">MN<option value="MS">MS<option value="MO">MO<option value="MT">MT<option value="NE">NE<option value="NV">NV<option value="NH">NH<option value="NJ">NJ<option value="NM">NM<option value="NY">NY<option value="NC">NC<option value="ND">ND<option value="OH">OH<option value="OK">OK<option value="OR">OR<option value="PA">PA<option value="RI">RI<option value="SC">SC<option value="SD">SD<option value="TN">TN<option value="TX">TX<option value="UT">UT<option value="VT">VT<option value="VA">VA<option value="WA">WA<option value="WV">WV<option value="WI">WI<option value="WY">WY
</select>
<input type="text" name="*City, State, ZIP" size="6" maxlength="5" onkeypress="return checkIt(event)">
Month and Day Select Menus
Both select menus are script-generated which allows the default selected items to reflect the current month and day. The date menu will also change for each month to correctly reflect the number of days in that month. If user does not change either the month or day, the menus are re-written. Name must be, "*Month and Day". IMPORTANT: *If your form should allow a user to select the current month and day, this add-on is probably not for you because if at least one of the values is not changed, it will be re-written. Place the following script in the body of your form where you want the select menus to appear.
<script language="JavaScript">
<!--
document.write("<select name=\"*Month and Day\" onchange=\"disableDate(this.form,this)\">")
for(var i=1; i<13; i++){
var sel = (i==month) ? "selected" : sel = ""
document.write("<option value="+months[i]+" "+sel+">"+months[i]+"\n")
}
document.write("</select>")
document.write("<select name=\"*Month and Day\" onchange=\"disableDate(this.form,this)\">")
for(var j=1; j<32; j++){
var sel = (j==date) ? sel = "selected" : ""
document.write("<option value="+j+" "+sel+">"+j+"\n")
}
document.write("</select>")
// -->
</script>
Like the basic version, the add-ons version can use either form buttons or images for the "Submit" and "Clear Form" controls. See directions for those in the
basic version directions.
Example
This example does not actually submit the form data.