User Guide

106 Chapter 8: Lesson 4: Validating Data to Enforce Business Rules
Exercise: add JavaScript-based validation code
In this exercise you will modify the Trip Insert page to validate the departure and return dates
using the JavaScript functions provided.
To validate the departure and return dates using JavaScript functions:
1 Open tripedit.cfm in your editor and do one of the following:
Copy example code provided Copy the tripedit3.cfm file from the solutions directory and
rename it to tripedit.cfm in the my_app subdirectory
Add JavaScript-based validation code to tripedit.cfm Follow these steps to modify the
tripedit.cfm page:
a Copy and insert the text from the scriptvalidation.txt in the solutions directory right before
the HTML
body tag in tripedit.cfm.
b Modify the departureDate and returnDate input tags to include the onValidate
attributes as follows:
<cfinput name="departureDate" size="10" validate="date"
onvalidate="isitFutureDate" message="Departure date must be a valid
future date (mm/dd/yyyy).">
<cfinput size="10" name="returnDate" validate="date"
onvalidate="validateTripDateRange" message="Return date must be a valid
date greater than departure date (mm/dd/yyyy).">
c Save the tripedit.cfm in the my_app directory.
2 Test this page by opening the tripedit.cfm page in your browser.
3 Test the date validation by checking that each of the following tasks fail:
a Enter a date in the past for the departure date field; for example, 01/01/2000 (be sure to
remember the leading zeroes).
b Enter a departure date greater than the return date; for example, enter 02/01/2004 for the
departure date, and 01/01/2004 for the return date. Remember that the JavaScript function
requires leading zeroes.
4 Test the date validation and ensure that the proper data succeeds; for example, enter
01/01/2004 for the departure date, and 01/14/2004 for the return date.
5 Test for an invalid date by entering 12/32/2002 for the return date.
You would expect the application to reject this date. It does not. This is because the
validate
attribute of a
cfinput tag (returnDate in this example) is ignored when there is a JavaScript
routine specified in the
onValidate attribute. To correct this, you must write a test to validate
the date using JavaScript (not addressed in this tutorial).
Validating the existence of the trip photo file
At this point, you have a more efficient application. The client is handling much of the validation
of the Compass Travel new trip business rules. Except for the trip photo file, the server receives
only valid data.
The trip photo file business rule does not fit nicely into this design, however. The last trip photo
business rule has two parts:
• A photo filename must accompany all new trips.
• The photo image file must reside within the images directory of the Compass Travel website.