University of Delaware: Information Technologies-Web Development

IT Web Development Help Pages

"Required Fields" JavaScript Validation Help

Questions should be directed to Web Development, it-webdev@udel.edu

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://primus.nss.udel.edu/javascript/CheckFields.js"></script>
<script type="text/javascript" src="http://primus.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.udel.edu/forms/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.udel.edu/forms/images/blank.gif" width="8" height="16" border="0" alt=" ">

Paste javascript code below the <head> tag

// Flags meanings

// 0 -> non null and length > 0

// 1 -> email address

// 2 -> ssn, will format to (nnn-nn-nnnn)

// 3 -> pin

// 4 -> larrys date as yyyy/mm/dd

// 5 -> numeric only

// 6 -> phone number (nnn) nnn-nnnn xnnnn

// 7 -> phone number nnn-nnn-nnnn xnnnn

// 8 -> monetary $xxx,xxx,xxx.yy

// 9 -> Date, delim can be '/', '-', '.'

// 10 -> birthdate, delim can be '/', '-', '.'

// 11 -> ssn that will not be formatted

var requiredFields = new Array(

"date",

"number",

"name",

"phone",

"replyto",

"affil"

);

var fieldNames = new Array(

"Date",

"Enter a numerical value",

"Name",

"Phone",

"E-mail",

"Affiliation"

);

var img = new Array(2,3,4,5,6,7);

var sta = new Array(2,2,2,2,2,2);

var flags=new Array(9,5,0,7,1,0);

var verboseErrors=new Array(0,0,0,0,1,0);

var optional=new Array(0,0,0,0,0,0);

</script>

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.

InformationTechnologies-Web Development