DreamingWell Javascript Form Validation

Javascript Form Validation

Posted by Travis Collins at January 7, 2005 11:22 PM

Form validation is never fun. No matter how idiot proof you make your form, there will always be a smarter idiot. There are two methods of validation; they are server side and client side. Usually the most thorough method is a combination of the two. This is an example of heavy client side validation. This method is especially useful for dynamically generated forms; from PHP for example.

This script is invoked when the client submits a form. A 2D array provides the IDs of the fields to be validated and the name of the function that validates the field. In this example the id is 'address' and is referenced in the array

<input type="text" id="address" name="address" class="form" >
<script language="javascript">
     requiredFieldNames[2] = new Array('address','minLength(1)');
</script>

You will notice that the requiredFieldNames array holds not only the id of the field to be validated, but a function to validate against. Elsewhere in the page is a javascript that implements the minLength function.

<script language="javascript">
function minLength(targetLength){
	if(targetForCheck.value.length < targetLength){
		return false;
	}
	else{
		return true;
	}
}
</script>

For those that are JavaScript savy, you'll notice that no connection has been made between the field and the validation function. This is where we use a bit of trickery. A global variable, aptly named targetForCheck 'points' to the field for checking. Thefore before calling the approriapte validation function this 'pointer' is updated. The called validation function then uses this field name. This method greatly reduces the amount of redundant code for each field.

The following is a function that would be called for the onClick of the submit button of the form. This function loops through the requiredFieldNames. It updates targetForCheck before calling the eval function for each field in the array. If this function returns false the form submission will be canceled.

<input type="text" id="address" name="address" class="form" >
<script language="javascript">
function formChecker() {
	var successful = true;

	//go through requiredFields and check that they match required length

	for (var i=0; i
         	//get target field

		target = document.getElementById(requiredFieldNames[i][0]);

		targetForCheck = target;

		//compare required length to count in field

		if(!eval(requiredFieldNames[i][1])){

			//field did not match requirement

			successful = false;

		}

		else{

			//field did meet requirement

		}

	}

	if(successful) {

		//all fields validated, so submit the form

		return true;

	}

	else {

		//show error text

                //do some error reporting here....

		return false;

	}

}	

</script>

Ok, now that you've suffered through that, I'll give you some juicy goods. Here is a collection of validation functions that I've created that provide some useful validations. It includes isEmail, isDate, isShortDate, isCreditCard and many more. Enjoy!