19-Aug-03 (Created: 19-Aug-03) | More in 'Howto'

How to validate HTML form fields using Aspire JS utilities

Summary

Aspire comes with a set of javascript utilities to validate form fields. These utilities can jump start your validation process. For complex validations you may either have to extend or use your own tools. But these utilties atleast will show the way for accomplishing this.

Where are these javascript utilities available

These are available in a subdirectory called "js". The name of the file is "genericedits1.js"

Step1 - Include the javascript file in your html page

((script src="/akc/js/genericedits1.js"))((/script))

I have used "((" in place of the less than sign and I have used "))" in place of the greater than sign. Replace them accordingly in your code when you use.

"akc" needs to be replaced by your web application prefix

Verifying that a set of fields on a form are required

This is demonstrated using the following example


/*
*********************************************************************
* createUser
*********************************************************************
*/
function createUser()
{
	alert("Creating a user");
	if (validateRequired(mainform,"userIdTextBox,passwordTextBox,rPasswordTextBox,firstNameTextBox,lastNameTextBox,emailTextBox") == false)
	{
		return;
	}
	
	if (mainform.passwordTextBox.value != mainform.rPasswordTextBox.value)
	{
		alert("Both password fields should have the same value");
		return;
	}
	fieldValues = getAllFieldValues(mainform);
	mainform.fieldValues.value = fieldValues;
	mainform.action="/akc/servlet/UpdateServlet";
	mainform.submit();
}
function onLoadFunction()
{
	fieldValues = "{{fieldValues}}";
	if (fieldValues != "")
	{
		setFieldValues(mainform,fieldValues);
	}
}

The function is called "validateRequired". This function takes its first argument the object reference to the form. The second argument is a comma separated list of field names in that form. The function will return false if any of the specified fields are empty.

Validating form fields using regular expressions: a step by step approach and sample code

Step1 - write one of these functions


//Define your types

function createTypeArray()
{
	typeArray = new Array();
	typeArray.arzCode = new createFieldType("arzCode","^\\w{6}$","ARZ Code is alphanumeric and 6 characters wide");
	typeArray.scac = new createFieldType("scac","^\\w{0,4}$","ARZ Code is alphanumeric and 6 characters wide");
	return typeArray;
}

Step2 - Include the following on your html page


var typeArray = createTypeArray();

Step3 - Use one of two functions


validateField(fieldObj, inFieldType)
validateForContent(thisForm,"field1|field1Type,field2|field2Type")

validateField(fieldObj, inFieldType)

This function will take as its input the fully qualified reference of the field inside of the form. Ex: document.mainform.field1. The second argument is the argument is the field type in quotes. This function will return false if the input doesn��t match the regular expression. In such an event it will also warn the user with the message that you have supplied as the type definition.

To understand this function more here is the source code for this funtion follows


function validateField(fieldObj, inFieldType)
{
	fieldValue = fieldObj.value;
	if (fieldValue == "") return new Boolean(true);

	var fieldType  = typeArray[inFieldType];
	if (fieldType.regExp.test(fieldValue) == false)
	{
		line1 = "You have typed : '" + fieldValue + "' for " + inFieldType;
		line2 = fieldType.fieldMessage;
		alert(line1 + "\n" + line2);
		fieldObj.focus();
		return new Boolean(false);
	}
	return new Boolean(true);
}

validateForContent(thisForm,"field1|field1Type,field2|field2Type")



//************************************************
// Validate field content based on pre-defined fieldtypes.
//
// inputs: 	form object
//		comma separated fieldNameAndType strings
// returns: true/false
// ex:  validateForContent(thisForm,"field1|field1Type,field2|field2Type")
//************************************************
function validateForContent(form,fieldNames)
{
   if (fieldNames == "")
   {
      return true;
   }
   fieldNameArray = fieldNames.split(",");
   for(i=0;I < fieldNameArray.length;i++)
   {
      fieldNameAndType = fieldNameArray[i];

	// Get field name and type
	fieldNameAndTypeArray = fieldNameAndType.split("|");
	fieldName = fieldNameAndTypeArray[0];
	fieldType = fieldNameAndTypeArray[1];

	// Get field object & value
      fieldObj = eval("form." + fieldName );
	
	if (validateField(fieldObj,fieldType) == false)
	{
		return false;
	}
   }
   return true;
}

Some more of the implementation source code


//************************************************
// Internal functions
// An internal function used by regexp support
//************************************************
function createFieldType(fieldTypeName, regExp, fieldMessage )
{
	this.fieldTypeName = fieldTypeName;
	this.regExp = new RegExp(regExp);
	this.fieldMessage = fieldMessage;
	return this;
}

function createTypeArray()
{
	typeArray = new Array();
	typeArray.arzCode = new createFieldType("arzCode","^\\w{6}$","ARZ Code is alphanumeric and 6 characters wide");
	typeArray.scac = new createFieldType("scac","^\\w{0,4}$","ARZ Code is alphanumeric and 6 characters wide");
	return typeArray;
}