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 allows you to specify a JavaScript function to handle your cfform input validation:

cfgrid
cfinput
cfslider
cftextinput
cftree

ColdFusion passes the following JavaScript objects to the JavaScript function you specify in the onvalidate attribute:

form_object (the form)
input_object (the tag whose value is being validated)
object_value (the value to validate)

Handling failed validation

The onerror attribute allows you to 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 are using 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:

cfgrid
cfinput
cfselect
cfslider
cftextinput
cftree

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

form_object
input_object
object_value
error message text

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 use JavaScript to validate form data:

Create a new file in ColdFusion Studio.

Edit the page so that it appears as follows:

<html>

<head>

  <title>JavaScript Validation</title>



<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>



</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>

Save the page as validjs.cfm.
View validjs.cfm in your browser.

Reviewing the code

The following table describes the highlight code and its function:

Code

Description

<script>  </script>
JavaScript code to test 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."
Message to display if the validation function returns a false value.

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 to test 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."	Message to display if the validation function returns a false value.

See the following Web site for information on JavaScript validation scripts: http://www.dannyg.com/javascript.

Developing ColdFusion Applications
Building Dynamic Forms