Validating Data

Validate each form field by:

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

ColdFusion validation rules

ColdFusion provides a variety of validation rules, for example:

Note 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">
Note 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.
  5. You will create InsertAction.cfm later in this procedure.

  6. Modify the form page heading:
  7. <H4>Employee Add Form</H4> 
    
  8. Modify the GetDepartments query so that it also retrieves Department_ID fields:
  9. <CFQUERY NAME="GetDepartments" DATASOURCE="HRExpress">
        SELECT Department_Name, Department_ID
        FROM Departments
    </CFQUERY>
    
  10. Position your cursor directly after the opening FORM tag.
  11. 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:
  12. <INPUT TYPE="HIDDEN" NAME="FirstName_Required" VALUE="First Name is 
    Required!">
    
  13. 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:
  14. <INPUT TYPE="HIDDEN" NAME="LastName_Required" VALUE="Last Name is 
    Required!">
    
  15. 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:
  16. <INPUT TYPE="HIDDEN" NAME="StartDate_Required" VALUE="You must enter 
    a date in the proper format (mm/dd/yy).">
    
  17. 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:
  18. <INPUT TYPE="HIDDEN" NAME="StartDate_Date" VALUE="You must enter a 
    date in the proper format (mm/dd/yy).">
    
  19. 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:
  20. <INPUT TYPE="HIDDEN" NAME="Salary_Required" VALUE="You must enter a 
    salary in the proper format (75000).">
    
  21. 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:
  22. <INPUT TYPE="HIDDEN" NAME="Salary_Float" VALUE="You must enter a 
    salary in the proper format (75000).">
    
  23. Add a text control so that a user can enter an Employee's FirstName:
  24. <B>EMPLOYEE FIRST NAME</B><BR>
    <INPUT TYPE="TEXT" NAME="FIRSTNAME" SIZE="20" MAXLENGTH="50">
    
  25. Change the select box NAME attribute from Department_Name to Department_ID:
  26. <SELECT NAME="Department_ID">
    
  27. Delete the opening and closing tags for the OPTION VALUE="ALL" block .
  28. Modify the select box's remaining OPTION tag to reference the Department_ID column instead of Department_Name:
  29. <OPTION VALUE="#Department_ID#">
    #Department_Name#
    </OPTION>
    
  30. Add a text input control after the Department select box so that a user can enter an Employee's start date:
  31. <B>Employee Start Date(mm/dd/yy)</B><BR>
    <INPUT TYPE="Text" NAME="StartDate" size="16" maxlength="16">
    
  32. Add a text input control after the Employee Start Date field so that a user can enter a new employee's salary:
  33. <B>Employee Salary (75000)</B><BR>
    <INPUT TYPE="Text" NAME="Salary" size="10" maxlength="10">
    
  34. Edit the Submit control's VALUE attribute:
  35. <INPUT TYPE="Submit" NAME="SubmitButton" VALUE="Add Employee">
    
  36. Save the page.
  37. Create a new page.
  38. Save it as InsertAction.cfm.
  39. 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.

  40. View the InsertForm.cfm in a browser.
  41. 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 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.