![]() ![]() ![]() |
||
|
In this exercise, you will compare server-side and client-side validation. You then modify the testedit.cfm page to use client-side scripting.
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 Developers 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.
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 |
The |
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" |
Use the |
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.
<form>
and </form>
tags to <cfform>
and </cfform>
tags, respectively.
<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
.
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 trips 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 Developers Guide.
Note: The client-side validation code that you added to the tripedit.cfm page does not validate the cross-field rules.
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>
Testing recommendations:
|
||
![]() ![]() ![]() |