Validating Data

Validate each form field by:

• Applying a validation rule that describes what data or data type to test for.
• Naming a procedure to perform if the validation fails.

You can validate input on either the client by adding JavaScript to the form page or the server using HTML and CFML. When you validate on the client, form fields are validated as you fill them in. When you validate on the server, form fields are validated after the form is submitted.

During this chapter, you will perform ColdFusion server-side form field validation using the hidden HTML input form control.

Hidden form control syntax

<INPUT TYPE="HIDDEN" NAME="FormFieldName_ColdFusionValidationRule" 
VALUE="Message">

• Add one hidden form control for each form field rule that you want to validate.
• The NAME attribute defines the name of the form field to validate and the validation rule that ColdFusion should apply.
• The VALUE attribute describes the message to send back to users when validation fails.

ColdFusion validation rules

ColdFusion provides a variety of validation rules, for example:

• _Float validates a numeric type.
• _Date validates a date type .
• _Required validates that a value has been entered.

Note:

It's good programming practices to group all hidden form controls at the top of the page.

Validation usage examples

This code validates that a user entered data in the LastName form field:

<INPUT TYPE="HIDDEN" NAME="LastName_Required" VALUE="You must enter a 
last name!">

This code validates that a user entered a numeric value in the Salary form field:

<INPUT TYPE="HIDDEN" NAME="Salary_Float" VALUE="Not a valid salary">

This code validates that a user entered a date value in the StartDate form field:

<INPUT TYPE="HIDDEN" NAME="StartDate_Date" VALUE="Not a valid date">

To validate form data:

1. Open SearchForm.cfm in HomeSite.
2. Save the page as InsertForm.cfm.
3. Title the page Chapter 10- Add Employee Form.
4. Edit the opening FORM tag's ACTION attribute so that data will pass to InsertAction.cfm.

You will create InsertAction.cfm later in this procedure.

5. Modify the form page heading:

<H4>Employee Add Form</H4> 

6. Modify the GetDepartments query so that it also retrieves Department_ID fields:

<CFQUERY NAME="GetDepartments" DATASOURCE="HRExpress">
    SELECT Department_Name, Department_ID
    FROM Departments
</CFQUERY>

7. Position your cursor directly after the opening FORM tag.
8. Add a hidden form control that assigns required to the FirstName field and displays a message to the user if no data was entered for that form control:

<INPUT TYPE="HIDDEN" NAME="FirstName_Required" VALUE="First Name is 
Required!">

9. Add a hidden form control that assigns required to the LastName field and displays a message to the user if no data was entered for that form control:

<INPUT TYPE="HIDDEN" NAME="LastName_Required" VALUE="Last Name is 
Required!">

10. Add a hidden form control that assigns required to the StartDate field and displays a message to the user if no data was entered for that form control:

<INPUT TYPE="HIDDEN" NAME="StartDate_Required" VALUE="You must enter 
a date in the proper format (mm/dd/yy).">

11. Add a hidden form control that validates a date format for the StartDate field and displays a message to the user if they enter data in the wrong format:

<INPUT TYPE="HIDDEN" NAME="StartDate_Date" VALUE="You must enter a 
date in the proper format (mm/dd/yy).">

12. Add a hidden form control that assigns required to the Salary field and displays a message to the user if they don't enter data:

<INPUT TYPE="HIDDEN" NAME="Salary_Required" VALUE="You must enter a 
salary in the proper format (75000).">

13. Add a hidden form control that validates a float format for the Salary field and displays a message to the user if they enter data in the wrong format:

<INPUT TYPE="HIDDEN" NAME="Salary_Float" VALUE="You must enter a 
salary in the proper format (75000).">

14. Add a text control so that a user can enter an Employee's FirstName:

<B>EMPLOYEE FIRST NAME</B><BR>
<INPUT TYPE="TEXT" NAME="FIRSTNAME" SIZE="20" MAXLENGTH="50">

15. Change the select box NAME attribute from Department_Name to Department_ID:

<SELECT NAME="Department_ID">

16. Delete the opening and closing tags for the OPTION VALUE="ALL" block .
17. Modify the select box's remaining OPTION tag to reference the Department_ID column instead of Department_Name:

<OPTION VALUE="#Department_ID#">
#Department_Name#
</OPTION>

18. Add a text input control after the Department select box so that a user can enter an Employee's start date:

<B>Employee Start Date(mm/dd/yy)</B><BR>
<INPUT TYPE="Text" NAME="StartDate" size="16" maxlength="16">

19. Add a text input control after the Employee Start Date field so that a user can enter a new employee's salary:

<B>Employee Salary (75000)</B><BR>
<INPUT TYPE="Text" NAME="Salary" size="10" maxlength="10">

20. Edit the Submit control's VALUE attribute:

<INPUT TYPE="Submit" NAME="SubmitButton" VALUE="Add Employee">

21. Save the page.
22. Create a new page.
23. Save it as InsertAction.cfm.

You will need to have this page created in order to test form validation.

You will add the code needed for inserting data in the next procedure.

24. View the InsertForm.cfm in a browser.
25. Test the validation by submitting the form leaving different fields empty.

Click here to see the how the form should look and validate.

Click here to see InsertForm.cfm's code.

Move on to the next procedure to build the action page that inserts the data into the database.

Note:

Almost all links will work at this time. You will learn how to define a checkbox value for the action page query during the next procedure.

Copyright © 1999, Allaire Corporation. All rights reserved.