Whatever message this page gives is out now! Go check it out!

Validating form input and handling errors with JavaScript

Last update:
May 18, 2026
ColdFusion 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:
  • The form JavaScript DOM object
  • The name attribute of the form element
  • The value of the control to validate 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 from 8 through 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.

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 (aLowerCase) == -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:
  • The JavaScript form object
  • The name attribute of the form element
  • The value that failed validation
  • The error message text specified by the CFML tag's message 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>

Share this page

Was this page helpful?
We're glad. Tell us how this page helped.
We're sorry. Can you tell us what didn't work for you?
Thank you for your feedback. Your response will help improve this page.

On this page