Validating form input and handling errors with JavaScript

ColdFusion MX lets you write your own validation routines in JavaScript, and lets you create JavaScript error handlers.

Validating input with JavaScript

In addition to native ColdFusion input validation using the validate attribute of the cfinput and cftextarea tags, the following tags support the onValidate attribute, which lets you specify a JavaScript function to handle your cfform input validation:

ColdFusion passes the following arguments to the JavaScript function that you specify in the onValidate attribute:

For example, if you write the cfinput tag as the following:

<cfinput type="text"
   ...
<!--- Do not include () in JavaScript function name. --->
   onvalidate="handleValidation"
   ...
>

You define the JavaScript function as the following:

<script>
<!--
function handleValidation(form_object, input_object, object_value) {
...
}
//-->
</script>

Example: validating a password

The following example validates a password. The password must have at least one of each of the following: an uppercase letter, a lowercase letter, and a number. It must be between 8 and 12 characters long. If the password is invalid, the browser displays a message box. If the password is valid, it redisplays the page with a brief success message.

To use JavaScript to validate form data:

  1. Create a ColdFusion page with the following content: 
    <html>
<head>
	<title>JavaScript Validation</title>

<!--- JavaScript used for validation. --->
<script>
<!--
	// Regular expressions used for pattern matching.
	var anUpperCase = /[A-Z]/;
	var aLowerCase = /[a-z]/;
	var aNumber = /[0-9]/;
	/* The function specified by the onValidate attribute.
		Tests for existence of at least one uppercase, lowercase, and numeric
		character, and checks the length for a minimum.
		A maximum length test is not needed because of the cfinput maxlength
		attribute. */
	function testpasswd(form, ctrl, value) {
		if (value.length < 8 || value.search(anUpperCase) == -1 || 
			value.search (anUpperCase) == -1 || value.search (aNumber) == -1) 
		{
			return (false);
		} 
		else
		{
			return (true);
		} 
	}
//-->
</script>
</head>

<body>
<h2>JavaScript validation test</h2>
<!--- Form is submitted only if the password is valid. --->
<cfif IsDefined("Form.passwd1")>
	<p>Your Password if valid.</p>
</cfif>
<p>Please enter your new password:</p>

<cfform name="UpdateForm" preservedata="Yes" >
	<!--- The onValidate attribute specifies the JavaScript validation
			 function. The message attribute is the message that appears
			 if the validation function returns False. --->
	<cfinput type="password" name="passwd1" required="YES"
		onValidate="testpasswd"
		message="Your password must have 8-12 characters and include uppercase 
and lowercase letters and at least one number."
		size="13" maxlength="12">

<input type="Submit" value=" Update... ">
</cfform>

</body>
</html>
  2. Save the page as validjs.cfm.
  3. View the validjs.cfm page in your browser.

Handling failed validation

The onError attribute lets you specify a JavaScript function to execute if an onValidate, onBlur or onSubmit validation fails. For example, if you use the onValidate attribute to specify a JavaScript function to handle input validation, you can also use the onError attribute to specify a JavaScript function to handle a failed validation (that is, when onValidate returns a False value). If you use the onValidate attribute, you can also use the onError attribute to specify a JavaScript function that handles the validation errors. The following cfform tags support the onerror attribute:

ColdFusion passes the following JavaScript objects to the function in the onerror attribute:

The following example shows a form that uses an onError attribute to tell ColdFusion to call a showErrorMessage JavaScript function that uses the alert method to display an error message. The function assembles the message from the invalid value and the contents of the cfinput tag's message attribute. 

<!--- The JavaScript function to handle errors.
       Puts a message, including the field name and value, in an alert box. --->
<script>
   <!--
   function showErrorMessage(form, ctrl, value, message) {
      alert("The value " + value +" of the " + ctrl + " field " + message);
   }
   //-->
</script>

<!--- The form. 
   The cfinput tags use the onError attribute to override the ColdFusion
   default error message mechanism. --->
<cfform>
   <!--- A minimum quantity is required and must be a number. --->
   Minimum Quantity: <cfinput type="Text" name="MinQuantity"
      onError="showErrorMessage" validate="numeric" required="Yes" 
      message="is not a number." ><br>
   <!--- A maximum quantity is optional, but must be a number if supplied. --->
   Maximum Quantity: <cfinput type="Text" name="MaxQuantity"
      onError="showErrorMessage" validate="numeric" 
         message="is not a number." ><br>
   <cfinput type="submit" name="submitit"> 
</cfform>

View comments in LiveDocs