Exercise 5: Validating data on the client using ColdFusion form tags

In this exercise, you will compare server-side and client-side validation. You then modify the testedit.cfm page to use client-side scripting.

Comparing server-side and client-side validation

Validating data on the server-side has two drawbacks. First, the action page is used for validation, so the form page is not in the browser context when the error is trapped. The user, therefore, will not get immediate feedback from the page where the data was entered. Second, because data capture occurs on the client and validation occurs on the server, the number of round-trips to the server is increased. This can cause increased traffic on the network and the server. If the data is validated on the client, only valid data is posted to the server and traffic is reduced.

An alternative approach to server-side editing is to use client-side scripting. Client-side scripting lets you validate the form data entered on the client prior to posting it to the server. CFML provides alternative versions of standard HTML form tags, which provide the advantages of client-side data validation. These data input tags include cfinput text, cfinput radio, cfinput checkbox, cfselect, and others. For more information, see Validating Data in ColdFusion MX Developer’s Guide.

ColdFusion form tags include the following attributes:

Attribute

Description

validate

The data type that the field tag validates against. Values include: integer, date, time, telephone, zipcode.

message

The error message that appears if validation fails.

range

The range of permissible values for this tag.

required

An indicator of whether data is required for the corresponding tag.

To use the improved form tags, you must replace the HTML form tag with the cfform tag. The following code snippets show the use of the improved ColdFusion form tags. The first code snippet shows how the duration field is validated on the server. The second code snippet shows how ColdFusion form tags simplify field validation on the client.

Server-side validation approach (no cfform tag)

The following code is on the server (tripeditaction.cfm page):

<!--- Number of people is required and must be numeric. --->
<cfif Form.numberPeople EQ "" or IsNumeric(Form.numberPeople) EQ False>
	<CFSET IsOk = "No">
	<cfoutput>The number of people must be a number and cannot be blank.
	</cfoutput>
</cfif>

Code

Explanation

<cfif Form.numberPeople EQ "" or
IsNumeric(Form.numberPeople) EQ False>

The cfif tag evaluates the value of the form variable numberPeople to determine if the user entered a value. The IsNumeric function checks whether the value entered on the form was a numeric value.

Client-side validation approach using a cfform tag

The following code is on the client (tripedit.cfm page):

<cfinput name="duration" message="Duration must be a number and cannot be blank."
validate="integer" required="Yes" size="3" maxlength="3">

Code

Explanation

<cfinput name="duration"
message="Duration must be a number and cannot be blank." validate="integer"
required="Yes" size="3" maxlength="3">

Use the cfinput tag to create the duration input entry field within a cfform tag. The validate attribute defines the field as an integer. The required attribute indicates that the field must have an entry. If the data is not entered or data entered is not an integer, the message attribute specifies that the message, "Duration must be...." appears.

Modifying the Trip Edit page to use ColdFusion form tags

In this exercise, you use the ColdFusion form tags to move the validation of many business rules from the server to the client. To do this, you change the HTML form tags in the tripedit.cfm page to ColdFusion form tags that validate these fields on the client side. Next, you remove the unneeded server-side single-field validation code from the tripeditaction.cfm page. Finally, you test the form to ensure that the client-side validation is working correctly.

To use the ColdFusion form tags on the Trip Edit page:

  1. Open the tripedit.cfm file in the my_app directory in your editor.
  2. Locate and change the <form> and </form> tags to <cfform> and </cfform> tags, respectively.
  3. Change the <input> tags to <cfinput> tags, <select> tags to <cfselect> tags, and <textarea> tags to <cftextarea> tags.

    Note: The input type for the submit button must remain a standard input rather than cfinput.

  4. For each ColdFusion form tag (cfinput and cfselect), assign the following appropriate values:

    Attribute value

    Description

    required

    Use this attribute for fields that must be filled out or selected.

    validate

    Use this attribute for fields that require a specific data type for validation. Values include: integer, date, time, telephone, and zip code.

    message

    Use this attribute for fields that require an error message to appear if validation fails. The message reflects the text that describes the business rule.

    The following table contains the revised code blocks:

    Rule

    Description

    Validation code

    1

    All trips must be named.

    <cfinput name= "tripName" 
    	maxlength = "50" size = "50" 
    	required = "Yes" 
    	message = "Trip name must not be blank">
    

    2

    All trips must be accompanied by a full description.

    <cftextarea name="tripDescription" 
    	required="Yes" 
    	message="Trip description must not be blank.">
    </cftextarea>
    

    3

    Each trip must be categorized by event type. Only valid event types (1-surfing, 2-mountain climbing, and so on) are permissible.

    <cfselect size="1" name="eventType" 
    	required="Yes" 
    	message="Type of event must be selected.">
    		<option value="1" selected>Surfing</option>
    		<option value="2">Mountain Climbing</option>
    		<option value="3">Mountain Biking</option>
    </cfselect>
    

    4

    Trip locations are required.

    <cfinput size="50" name="tripLocation" 
    	required="Yes"
    	message="Trip location must not be blank.">
    

    5

    The maximum number of people permitted on the trip must be specified.

    <cfinput name="numberPeople" 
    	size="6"
    	required="Yes" 
    	validate="integer" 
    	message="The number of people field must be 
    	a number and cannot be blank.">
    

    6

    The trip departure and return dates must be specified for each trip.

    All trip dates must be valid future dates. Departure date must precede return date.

    <cfinput name="departureDate" 
    	size="10"
    	required="Yes" 
    	validate="date" 
    	message="Departure date must be a valid date.">
    
    <cfinput name="returnDate"
    	size="10" 
    	required="Yes" 
    	validate="date" 
    	message="Return date must be a valid date.">
    

    7

    The trip’s price and base cost are required. Both values are positive numeric values. The trip price must have at least a 20% markup over base cost.

    <cfinput name="price"
    	size="10" 
    	required="Yes" 
    	validate="integer" 
    	message="Price is required and must be numeric.">
    
    <cfinput name="baseCost"
    	size="10" 
    	required="Yes" 
    	validate="integer" 
    	message="Base cost is required and must be numeric.">
    

    8

    Any trip priced over $750 requires a deposit.

    <cfinput name="depositRequired"
    	type="checkbox" 
    	value="Yes" >
    

    9

    A trip leader must be identified.

    <cfinput name="tripLeader"
    	maxlength="50" size="50" 
    	required="Yes" 
    	message="A trip leader must be specified.">
    

    10

    A photo must accompany all new trips.

    <cfinput name="photo"
    	maxlength="50" size="50" 
    	required="Yes" 
    	message="Valid photo file name must be specified.">
    

    Tip: For additional help, review the completed code in the ttripedit_lesson7_ex5.cfm file within the solutions directory. For more details about using ColdFusion form tags and their attributes, see ColdFusion MX Developer’s Guide.

    Note: The client-side validation code that you added to the tripedit.cfm page does not validate the cross-field rules.

  5. Open the tripeditaction.cfm file in the my_app directory and delete the code for the following single-field validation rules:
  6. Save the file.

    The modified tripeditaction.cfm page appears as follows:

    <cfset isOk = "Yes">
    <cfif not isdefined("Form.depositRequired")>
       <cfset form.depositRequired = "No">
    </cfif>
    <cfif Form.price GT 750 AND Form.depositRequired EQ "No">
    	<cfset IsOk = "No">
    	<cfoutput>Deposit is required for trips priced over $750.</cfoutput>
    </cfif>
    <cfif Form.basecost * 1.2 GT #Form.price#>
    	<cfset IsOk = "No">
    	<cfoutput>Price must be marked up at least 20% above cost.</cfoutput>
    </cfif>
    <cfif form.departureDate GT form.returnDate>
    	<cfset isOk = "No">
    	<cfoutput>Return date cannot precede departure date. Please re-enter.</cfoutput>
    </cfif><html>
    <head>
    <title>Trip Maintenance Confirmation</title>
    </head>
    
    <body>
    
    <cfif isOk EQ "Yes">
    	<h1>Trip Added</h1>
    	<cfoutput>You have added #Form.TripName# to the trips database.
    	</cfoutput>
    </cfif>
    </body>
    </html>
    

To test the modified code:

  1. View the tripedit.cfm page in a browser.
  2. Test the client- and server-side field validations by filling out the fields on the form and clicking Save.

    Testing recommendations: