Developing ColdFusion MX Applications with CFML Previous Up One Level Next Home Search
Building Dynamic Forms


Input validation with JavaScript

In addition to native ColdFusion input validation using the validate attribute of the cfinput and cftextinput 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 you specify in the onvalidate attribute:

For example, if you code 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>

Handling failed validation

The onerror attribute lets you specify a JavaScript function to execute if a 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 validate attribute, you can also use the onerror attribute to specify a JavaScript function handle validation errors. The following cfform tags support the onerror attribute:

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

Example: validating an e-mail address

The following example validates an e-mail entry. If the string is invalid, it displays a message box. If the address is valid, it redisplays the page. To be valid, the e-mail address must not be an empty string, contain an at sign (@) that is at least the second character, and contain a period (.) that is at least the fourth character.

To use JavaScript to validate form data:

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

<script>
<!--
function testbox(form, ctrl, value) {
  if (value == "" || value.indexOf ('@', 1) == -1 || 
value.indexOf ('.', 3) == -1) 
  {
    return (false);
  } 
  else
  {
    return (true);
  } 
}
//-->
</script>

</head>

<body>
<h2>JavaScript validation test</h2>

<p>Please enter your email address:</p>
<cfform name="UpdateForm" preservedata="Yes"
  action="validjs.cfm" >

  <cfinput type="text"
    name="inputbox1"
    required="YES"
    onvalidate="testbox"
    message="Sorry, your entry is not a valid email address."
    size="15"
    maxlength="30">

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

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

Reviewing the code

The following table describes the highlighted code and its function:
Code
Description
 
<script>
<!--
function testbox(form) {
Ctrl = Form.inputbox1;
  if (Ctrl.value == "" || 
    Ctrl.value.indexOf ('@', 1) == -1 ||
    Ctrl.value.indexOf ('.', 3) == -1) 
  {
    return (false);
  } 
  else
  {
    return (true);
  } 
}
//-->
</script>
JavaScript code that tests for valid entry in the text box. The if statement checks to making sure that the field is not empty and contains an at sign (@) that at least the second character and a period (.) that is at least the fourth character.
 
onvalidate="testbox"
Calls the JavaScript testbox function to validate entries in this control.
 
message="Sorry, your entry is not a valid
  email address."
Displays a message if the validation function returns a false value.

Copyright © 2002, Macromedia Inc. All rights reserved. Previous Up Next Home Search

Comments