There are a couple of ways to ensure valid user input in complex forms. The most frequently used are validation of each field in onchange event handlers, or making fields mandatory.

Two additional options are shown here:

• validate user input when pressing the Submit button

• validate input on field changes and disabling "Submit"

The user input that we plan to enforce in our custom validation logic for this sample is pretty simple: We want to make sure that each of the three input text fields on the form contains at least two characters.

This example leads you through the creation of a simple test form that outlines both approaches. Instead of entering the steps manually, you may also download the attached sample form and import it into your own IDM test system.

Here's what you need to do:

Create a simple workflow with a form containing 3 custom text fields: "Field1", "Field2", and "Field3".

For each field add 2 event handlers: "onchange" and (optionally) "onmouseout".

The function called for these events is always the same: "registerInput( field )"

Add an onload form event handler that calls "onload_form( form )"

Create an inline form script

Insert the following script to this inline form script:

var ACTION_SUBMIT	= "SubmitAction";
var btnSubmit			= undefined;
var globalData 		= new Object();
globalData.fields		= new Object();

// disable/enable the Submit button
function disableButton( btnDisable )
{
	// if we haven't yet located the Submit button, find it now
   	if ( !btnSubmit ) 
   		btnSubmit = document.getElementById( 'SubmitAction1' );
	// disable/enable the Submit button
   	if ( btnSubmit ) 
   		btnSubmit.disabled = btnDisable;
}

// validate user input for the stored fields
function validInput()
{
	var isValid = true;
   	for ( var fld in globalData.fields )
   	{
   		fldValue = globalData.fields[ fld ].value;
		// our custom logic is: each field needs at least 2 characters input
   		if ( fldValue.length < 2 ) 
   		{
   			isValid = false;
   			break;
   		}
   	}
   	return( isValid );
 }

// store input fields and validate user input
function registerInput( field )
{
   if ( !globalData.fields[ field.getName() ] ) 
   {
   	globalData.fields[ field.getName() ] = new Object();
   }
   globalData.fields[ field.getName() ].value = field.getValue();
   disableButton( !validInput() );
}

// register an event handler for the Submit action which allows us to do validation
// when Submit is pressed
function onload_form( form )
{
   // define hook: before submitting we do all necessary validation
   form.interceptAction( ACTION_SUBMIT, "around",
      function ( invocation )
      {
      	 // validate data before submitting
         var result =  validInput(); 
         if ( result )
         {
            result = invocation.proceed();
         }
         else
         {
            alert( 'invalid input' );
         }
         return result;
      }
   );
}

The key function that does the validation is called "validInput()" - in your custom forms you will need to add the logic that does the validation that you need.

This function is called

1. each time a field change is detected (called from the registerInput function) to allow on-the-fly-validation

• when the submit button is called. This event hook is defined during the onload form event.

The Submit button remains disabled until the user enters data that successfully pass the field validation.

If you do not need to disable the submit button in your own form, you may simply modify the sample and omit the event handlers that are used in the three text fields.


If you do not need to validate input when submitting the form, simply remove the function onload_form() and the form:onload() event handler.