Configuring your Form for the Add-Ons 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.
You can mix these special add-on fields alone, with other add-on fields, or mixed with non-required fields. 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 NON-required 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 (NOT allowed: e-mail or E-mail. Allowed: Email or email).
<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 the original values you set in the elements themselves. If any of the 3 fields are left empty or do not contain the correct amount of digits (3-3-4), 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 (asterisk preceeding the name), and named, "*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 considered "empty" and 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.