http://usarsarollerskaters.org/~site/Elements/HCUser_Forms_Submit/FormValidation.js

1// ********************************************************************************************
2// *	  Javscript used for error checking required form fields.			      *
3// ********************************************************************************************
4
5// All of the error messages that are to be displayed are appended to this string
6// in order to only display one message for the entire form rather than displaying multiple
7// alert windows
8var errorMsg = "\n";
9
10
11// The ValidateField function is called for each required field in the form. It makes sure
12// the field is not empty or unchecked depending on the type of field given.
13// This function also adds an error string to the end of the errorMsg variable when it comes
14// across a field that is invalid
15// inputs
16function ValidateField(field, msg) {  
17
18	// check for an empty text field
19	if (field.type=='text') {
20		if (field.value.trim().length == 0) {
21			errorMsg += msg+ "\n"; 
22		}
23	} else if (field.type=='checkbox') {
24		// check for an unchecked checkbox
25		if (!field.checked)  {
26			errorMsg += msg + "\n"; 
27		}
28	} else if (field.type=='textarea') {
29		// check for an empty textarea
30		if (field.value.trim().length ==0) {
31			errorMsg += msg+ "\n"; 
32		}
33	} else {
34		// check for unchecked radio buttons
35		var bChecked = false;
36		if(field.value) // if this is true, then there is only one button (we need to check differently) or it's chrome.
37			if(field.checked)
38				bChecked = true;			
39		// Go through the array just in case
40		for (i=0; i < field.length; i++) {
41			if (field[i].checked)
42				bChecked = true;
43		}
44		
45		if (!bChecked) {
46			errorMsg += msg+ "\n";	
47		}
48	}
49}
50		
51
52	
53
54
55// The DisplayError function formats and displays the error message(s) if there are any. 
56// If no errors were found, it simply submits the form.
57// TODO:  we should rename this fxn to DisplayErrorOrSubmit, because it submits the form if there are no errors.
58// We can't rename this fxn right now because pages published in classic use this fxn.  However, once everyone converts 
59// to LPX, DisplayError will no longer be referenced on user pages, and we can safely switch to a new descriptive name.
60function DisplayError(form, name)
61{
62	// if there s an error message, display it.
63	if (errorMsg!="\n") {
64		// add the default error string to the beginning of the error message
65		var errorMsg2 = "There's a problem with the form submission! \n\n";
66		errorMsg2 += errorMsg
67		alert(errorMsg2);
68
69		// reset the error message after displaying, so the user can attempt
70		// submission again.
71		errorMsg = "\n";
72	} else {
73	   // set the value of the button name so multiple submit buttons can work
74	   if (form.elements["FORM_SUBMIT_BUTTON_NAME"] != null) {
75		   form.elements["FORM_SUBMIT_BUTTON_NAME"].value = name;
76	   }
77	   // if no error, submit the form
78	   form.submit();
79	}
80}
81
82// ********************************************************************************************
83// *	  Javscript used to support LPX forms elements					      *
84// ********************************************************************************************
85
86// get selected value of a radio group
87function GetRadioValue(radioGroup)
88{
89	if(radioGroup.value)
90	{
91		if(radioGroup.checked)
92		{
93			return radioGroup.value;
94		}
95	}
96	for (var i = 0; i < radioGroup.length; i++)
97	{
98		if (radioGroup[i].checked)
99		{
100			return radioGroup[i].value;
101		}
102	}
103	return "";
104}
105
106function Trim(inputString) {
107	if (typeof inputString != "string") { return inputString; }
108	var retValue = inputString;
109	var ch = retValue.substring(0, 1);
110	while (ch == " ") {
111		retValue = retValue.substring(1, retValue.length);
112		ch = retValue.substring(0, 1);
113	}
114	ch = retValue.substring(retValue.length-1, retValue.length);
115	while (ch == " ") {
116		retValue = retValue.substring(0, retValue.length-1);
117		ch = retValue.substring(retValue.length-1, retValue.length);
118	}
119	while (retValue.indexOf("  ") != -1) {
120		retValue = retValue.substring(0, retValue.indexOf("  ")) + retValue.substring(retValue.indexOf("  ")+1, retValue.length);
121	}
122	return retValue;
123}
124
125// gets form element type
126function GetType(element)
127{
128	if(element.type == null)
129	{
130		// type is null for RadioGroups, so you have to get it from the first item in the group
131		return element[0].type;
132	}
133	return element.type;
134}
135
136// gets the form object based on its uniqueID
137// in LPX, DIVs are id-ed by the uniqueIDs of the elements, the actual forms are named "FORM_" + uniqueID
138function GetForm(strUniqueID)
139{
140	var objForm;
141	if(navigator.appName == 'Netscape' && parseInt(navigator.appVersion) < 5)
142	{
143		// for NS4, we retrieve the first form in the layer id-ed by the uniqueID
144		objForm = document.layers[strUniqueID].document.forms[0];
145	}
146	else
147	{
148		// otherwise we just address the form by "FORM_" + uniqueID
149		objForm = document.forms["FORM_"+strUniqueID];
150	}
151	return objForm;
152}
153
154// The following functions operate on Homestead form elements dropped on user's pages.  In LPX, form element data is
155// structured into javascript arrays that get published on user pages:
156// 	unique_id[] = id of the form element
157//	form_name[] = name of the form element
158//	required[]  = "true"/"false" whether we need to validate this field
159//	req_message[] = string of the message to display if required field is empty
160
161// resets all the Homestead form elements on the user's page
162function ResetHSForms()
163{
164	// iterate through array of form elements and reset them
165	for (i=0; i<form_name.length; i++)
166	{
167		var strUniqueID = unique_id[i];

168		var srcForm = GetForm(strUniqueID);
169		srcForm.reset();
170	}
171}
172
173// processes the form submission
174function ProcessHSForms(submitForm)
175{
176	// iterate through array of form elements and copy their values into the form that we want to submit
177	for (j=0; j<form_name.length; j++)
178	{
179		// get form element properties from the arrays
180		var strUniqueID = unique_id[j];
181		var strFormName = form_name[j];
182		var bRequired = required[j] == "true";
183		var strReqMessage = req_message[j];
184		// prepare destination and source form fields
185		var destField = submitForm.elements[strFormName];
186		var srcForm = GetForm(strUniqueID);
187		var srcField = srcForm.elements[strFormName];
188		var strType = GetType(srcField);
189		
190		if(bRequired)
191		{
192			if(strReqMessage == "")
193			{
194				strReqMessage = "The element " + strFormName + " is required";
195			}
196			ValidateField(srcField, strReqMessage);
197		}
198
199		if(strType == "text" || strType == "textarea")
200		{
201			destField.value = srcField.value;
202		}
203		else if(strType == "checkbox")
204		{
205			if(srcField.checked)
206			{
207				destField.value = srcField.value;
208			}
209			else
210			{
211				destField.value = "";
212			}
213		}
214		else if(strType == "radio")
215		{
216			destField.value = GetRadioValue(srcField);
217		}
218		else if(strType == "select-one" || strType == "select-multiple")
219		{
220			destField.value = srcField.options[srcField.selectedIndex].value;
221		}
222	}
223	// this fxn will display any errors found during validation, otherwise submit the form
224	DisplayError(submitForm);
225}