NOTE: This javascript validation is intended for University use only and will not work from a non-UD web server.
The code below is javascript used in conjunction with this sample "Contact Us" form.
- Step 1 Copy this code and paste it above the </head> tag in your html and follow the steps below. Do not edit:
<script type="text/javascript" src="http://chico.nss.udel.edu/javascript/CheckFields.js"></script>
<script type="text/javascript" src="http://chico.nss.udel.edu/javascript/describe.js"></script>
- Step 2 Under the requiredFields array
 , match these with the name="" attribute in your form fields.
Do this for all required fields (ex: The first field in the sample form is <input type="text" name="date" size="10" maxlength="10"> so the value of name="date" should match the first item in the requiredFields array)
Make sure that each item in this array is inside quotes and followed by a comma.
- Step 3 This step lists the field names. Under the fieldNames array , match these with the field title of your form field.
This is also needed for all required fields (ex: The second field in your form is "Enter a numerical value" so the second value in the field array should be "Enter a numerical value"
This will direct the user to fill out the required field if they failed to do so originally.
- Step 4 This step counts the total number of required fields. Inside of the img array , starting with the first image in the html (Always start at 0 for an array) count up to your first required field and end with the last required field. NOTE: Do not count background images, only those that fall inside of an <img> tag.
(ex: In this sample form, the first required field is the third image on the page. so your image array would look like 2,3,4,5,6,7)
- Step 5 This step displays a star next to all required fields. Inside of the sta array , match these numbers with the total number of required fields.
There are 2 options to choose from: 0=blank, the field is required but the "*" is not seen by the user. This is a good way to have the user complete the entire form instead of partially. The second option is 2=star which displays the "*" on all required fields. (ex: if you have 4 required fields on the form you would have 2,2,2,2)
- Step 6 This step is used to validate the data entered in the form field itself. Inside of the flags array , starting with the first required field, follow the chart below for flag meanings.
(ex: the first field is date, so your first number in this array would be 9. The second field is a number so the next number in the array is 5 and so. If no specific entry is necessary (a phone number or date), only text, that number would be 0. NOTE: Any e-mail field here must match with the verbose array below
- Step 7 This step is used in conjunction with the e-mail field. Inside of the verbose array , Show "1" for any e-mail required field and "0" for the rest of them.
(ex: if your 5th field is an e-mail field you would have 0,0,0,0,1,0)
- Step 8 In order for the validation to be checked, you need to add onsubmit="return(sub_form(this));" to your <form> tag.
This tells the page to validate the data entered on the form when the user clicks the submit button
- Step 9 Add this to every required field in the html, onblur="CheckField(this.form,this,'');" onchange="strip_blanks(this);" (ex: <input name="address1" type="text" class="fixedfont10" onblur="CheckField(this.form,this,'');" onchange="strip_blanks(this);" size=30 maxlength="50"> )
The script will skip validating this field if you do not add the event above.
- Step 10 Add the star image in front of all required fields <img src="http://www.mis.udel.edu/images/star.gif" width="8" height="16" border="0" alt="required">
(ex: only add the star image if you are using "2"'s in step 5. If you are blank images, add <img src="http://www.mis.udel.edu/images/blank.gif" width="8" height="16" border="0" alt=" ">
 Paste javascript code below the <head> tag
Troubleshooting
The most common error is this popup window. This usually is due to a missing or extra "," in one the arrays or your number totals do not match the fieldnames or requiredFields arrays. Double check your code, save and test again.
|