Dynamic Drive- Required field(s) validation

New Revised CSS Library Forums Web Tools

Required field(s) validation

Note: Updated Jan 16th, 2003 to version 1.1. Now checks radio buttons as well.

Description: One of the most popular form validation tasks is to check that important fields within a form have been filled out by the user. This is a generic script that will do just that, by verifying that mandatory fields are filled in before form submission. If one or more of the required fields are empty, a popup dialog will appear showing the omitted fields. Updated to check radio buttons as well.

Demo: All the below fields must be entered:

Directions:

Simply add the below to the <BODY> of your page. It contains the validation script, plus a sample form following it:

Select All

<script language="JavaScript">
<!--

/***********************************************
* Required field(s) validation v1.10- By NavSurf
* Visit Nav Surf at http://navsurf.com
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function formCheck(formobj){
	// Enter name of mandatory fields
	var fieldRequired = Array("FirstName", "LastName");
	// Enter field description to appear in the dialog box
	var fieldDescription = Array("First Name", "Last Name");
	// dialog message
	var alertMsg = "Please complete the following fields:\n";
	
	var l_Msg = alertMsg.length;
	
	for (var i = 0; i < fieldRequired.length; i++){
		var obj = formobj.elements[fieldRequired[i]];
		if (obj){
			switch(obj.type){
			case "select-one":
				if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "select-multiple":
				if (obj.selectedIndex == -1){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "text":
			case "textarea":
				if (obj.value == "" || obj.value == null){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			default:
			}
			if (obj.type == undefined){
				var blnchecked = false;
				for (var j = 0; j < obj.length; j++){
					if (obj[j].checked){
						blnchecked = true;
					}
				}
				if (!blnchecked){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
			}
		}
	}

	if (alertMsg.length == l_Msg){
		return true;
	}else{
		alert(alertMsg);
		return false;
	}
}
// -->
</script>



<!--SAMPLE FORM -------------------------------->
<form name="formcheck" onsubmit="return formCheck(this);">
First Name: <input type=text name="FirstName" size="25"><br>
Last Name: <input type=text name="LastName" size="25"><br>
<input type=submit value="Submit Form">
</form>

As shown in the code above, to apply the validation script to your form, you should:

1) Inside the <FORM> tag itself of your form, input the onSubmit event handler: onsubmit="return formCheck(this);"
2) Give all the mandatory form elements a unique name (ie: <textarea name="Address">)
3) Finally inside the script, input these names as instructed by the documentation of script.