Validating form field data types

One limitation of standard HTML forms is that you cannot validate that users input the type or range of data you expect. ColdFusion enables you to do several types of data validation by adding hidden fields to forms.

The following table describes the hidden field suffixes that you can use to do validation:
Field suffix
Value attribute
Description
_integer
Custom error message
Verifies that the user entered a number. If the user enters a floating point value, it is rounded to an integer.
_float 
Custom error message
Verifies that the user entered a number. Does not do any rounding of floating point values.
_range
MIN=MinValue
MAX=MaxValue
Verifies that the numeric value entered is within the specified boundaries. You can specify one or both of the boundaries separated by a space.
_date
Custom error message
Verifies that the user entered a date and converts the date into the proper ODBC date format. Will accept most common date forms; for example,
9/1/98; Sept. 9, 1998.
_time 
Custom error message
Verifies that the user correctly entered a time and converts the time to the proper ODBC time format.
_eurodate
Custom error message
Verifies that the user entered a date in a standard European date format and converts into the proper ODBC date format.

Note:   Adding a validation rule to a field does not make it a required field. You need to add a separate _required hidden field if you want to ensure user entry.

The following procedure creates a simple form for entering a start date and a salary. It uses hidden fields to ensure that you enter data and that the data is in the right format.

This example illustrates another concept that might seem surprising. You can use the same ColdFusion page as both a form page and its action page. Because the only action is to display the values of the two variables that you enter, the action is on the same page as the form.

Using a single page for both the form and action provides the opportunity to show the use of the IsDefined function to check that data exists. This way, the form does not show any results until you submit the input.

To validate the data that users enter in the insert form:

  1. Create a new page with the following text:
    <html>
    <head>
      <title>Simple Data Form</title>
    </head>
    <body>
    <h2>Simple Data Form</h2>
    
    <!--- Form part --->
    <form action="datatest.cfm" method="Post">
      <input type="hidden" 
        name="StartDate_required" 
        value="You must enter a start date.">
      <input type="hidden" 
        name="StartDate_date" 
        value="Enter a valid date as the start date.">
      <input type="hidden" 
        name="Salary_required" 
        value="You must enter a salary.">
      <input type="hidden" 
        name="Salary_float" 
        value="The salary must be a number.">
      Start Date: 
      <input type="text" 
        name="StartDate" size="16" 
        maxlength="16"><br>
      Salary: 
      <input type="text" 
        name="Salary" 
        size="10" 
        maxlength="10"><br>
      <input type="reset" 
        name="ResetForm" 
        value="Clear Form">
      <input type="submit" 
        name="SubmitForm" 
        value="Insert Data">
    </form>
    <br>
    
    <!--- Action part --->
    <cfif isdefined("Form.StartDate")>
      <cfoutput>
        Start Date is: #DateFormat(Form.StartDate)#<br>
        Salary is: #DollarFormat(Form.Salary)#
      </cfoutput>
    </cfif>
    </html>
    
  2. Save the file as datatest.cfm.
  3. View the file in your browser, omit a field or enter invalid data, and click the Submit button.

When the user submits the form, ColdFusion scans the form fields to find any validation rules you specified. The rules are then used to analyze the user's input. If any of the input rules are violated, ColdFusion sends an error message to the user that explains the problem. The user then must go back to the form, correct the problem, and resubmit the form. ColdFusion does not accept form submission until the user enters the entire form correctly.

Because numeric values often contain commas and dollar signs, these characters are automatically deleted from fields with _integer, _float, or _range rules before the form field is validated and the data is passed to the form's action page.

Reviewing the code

The following table describes the code and its function:
Code
Description
<form action="datatest.cfm"
  method="post">
Gather the information from this form using the Post method, and do something with it on the page dataform.cfm, which is this page.
<input type="hidden" 
  name="StartDate_required" 
  value="You must enter a start date.">
<input type="hidden" 
  name="StartDate_date" 
  value="Enter a valid date as the
  start date.">
Require input into the StartDate input field. If there is no input, display the error information "You must enter a start date." Require the input to be in a valid date format. If the input is not valid, display the error information "Enter a valid date as the start date."
<input type="hidden" 
  name="Salary_required" 
  value="You must enter a salary.">
<input type="hidden" 
  name="Salary_float" 
  value="The salary must be a number.">
Require input into the Salary input field. If there is no input, display the error information "You must enter a salary." Require the input to be in a valid number. If it is not valid, display the error information "The salary must be a number."
Start Date: 
<input type="text" 
  name="StartDate" size="16" 
  maxlength="16"><br>
Create a text box called StartDate in which users can enter their starting date. Make it exactly 16 characters wide.
Salary: 
<input type="text" 
  name="Salary" 
  size="10" 
  maxlength="10"><br>
Create a text box called Salary in which users can enter their salary. Make it exactly ten characters wide.
<cfif isdefined("Form.StartDate")>
  <cfoutput>
    Start Date is:
      #DateFormat(Form.StartDate)#<br>
    Salary is: 
      #DollarFormat(Form.Salary)#
  </cfoutput>
</cfif>
Output the values of the StartDate and Salary form fields only if they are defined. They are not defined until you submit the form, so they do not appear on the initial form. Use the DateFormat function to display the start date in the default date format. Use the DollarFormat function to display the salary with a dollar sign and commas.




Comments