Form Validation - Exercise

Contact Us or call 1-877-932-8228
Form Validation - Exercise

Form Validation

Duration: 20 to 30 minutes.

In this exercise, you will modify the calculator processing page so that it validates the form input. If there are no errors, the page will be processed. However, if errors are found, the user will be returned to the form page.

We will also be checking the units to see if the speeds are in mph or kph.

  1. Open FlowControl/Exercises/ProcessCalculator.cfm in your editor.
  2. At the very top of the page, write an if condition that checks to make sure that:
    • Neither of the name form fields is empty.
    • The speeds entered are numeric.
  3. If there are errors, redirect the page back to Calculator.cfm. Otherwise, continue with the page processing.
  4. Define a variable Conversion with the value of .62.
  5. Write an if condition that checks to see if the speeds are in mph or kph.
    • If they are in kph, yourmarathontime and friendmarathontime will have to be calculated using the Conversion variable.
  6. To test your new page, open FlowControl/Exercises/Calculator.cfm in your browser and submit the form.

Code Sample:

FlowControl/Exercises/ProcessCalculator.cfm
               <!---
	Write an if condition that checks to make sure that:
		A. Neither of the name form fields is empty.
		B. The speeds entered are numeric.
	If there are errors, redirect back to the FORM.
	Otherwise, continue with the page processing.
--->
<html>
<head>
	<title>Calculate Speeds</title>
</head>
<body>
<h1>Calculate Speeds</h1>

<cfset Marathon = 26.2>
<!---
	Define a variable Conversion with the value of .62

	Write an if condition that checks to see if the speeds
	are in mph or kph. If they are in kph, yourmarathontime
	and friendmarathontime will have to be calculated
	using the Conversion variable.
--->
<cfset yourmarathontime = Marathon/FORM.yourspeed>
<cfset friendmarathontime = Marathon/FORM.friendspeed>

<cfset yourhours = Int(yourmarathontime)>
<cfset yourminutes = (yourmarathontime * 60) MOD 60>
<cfset friendhours = Int(friendmarathontime)>
<cfset friendminutes = (friendmarathontime * 60) MOD 60>

<cfoutput>
#FORM.yourname#, at #FORM.yourspeed# #FORM.units#,
you would run a marathon in #yourhours#
hours and #yourminutes# minutes.<br>

At #FORM.friendspeed# #FORM.units#, #FORM.friendname# would
run a marathon in #friendhours# hours
and #friendminutes# minutes.<br>

<p>Form processed at #TimeFormat(Now(),"h:mmtt")# on
	#DateFormat(Now(),"mmmm d, yyyy")#.</p>
</cfoutput>
</body>
</html>

Add a basic error message to Calculator.cfm. To do this, you will need to figure out a way to pass data from ProcessCalculator.cfm to Calculator.cfm letting it know that there has been an error.

Solution:

FlowControl/Solutions/ProcessCalculator.cfm
               <cfif FORM.yourname EQ "" 
	OR FORM.friendname EQ ""
	OR NOT isNumeric(FORM.yourspeed) 
	OR NOT isNumeric(FORM.friendspeed)>
		<cflocation url="Calculator.cfm" addtoken="no">
</cfif>
<html>
<head>
	<title>Calculate Speeds</title>
</head>
<body>
<h1>Calculate Speeds</h1>

<cfset Marathon = 26.2>
<cfset Conversion = .62>

               <cfif FORM.units EQ "mph">
	<cfset yourmarathontime = Marathon/FORM.yourspeed>
	<cfset friendmarathontime = Marathon/FORM.friendspeed>
<cfelse>
	<cfset yourmarathontime = Marathon/Conversion/FORM.yourspeed>
	<cfset friendmarathontime = Marathon/Conversion/FORM.friendspeed>
</cfif>

<cfset yourhours = Int(yourmarathontime)>
<cfset yourminutes = (yourmarathontime * 60) MOD 60>
<cfset friendhours = Int(friendmarathontime)>
<cfset friendminutes = (friendmarathontime * 60) MOD 60>

<cfoutput>
#FORM.yourname#, at #FORM.yourspeed# #FORM.units#,
you would run a marathon in #yourhours#
hours and #yourminutes# minutes.<br>

At #FORM.friendspeed# #FORM.units#, #FORM.friendname# would
run a marathon in #friendhours# hours
and #friendminutes# minutes.<br>

<p>Form processed at #TimeFormat(Now(),"h:mmtt")# on
	#DateFormat(Now(),"mmmm d, yyyy")#.</p>
</cfoutput>
</body>
</html>

Challenge Solution:

FlowControl/Solutions/Calculator-challenge.cfm
<html>
<head>
<title>Marathon Time Calculator</title>
</head>
<body>

<h1>Marathon Time Calculator</h1>
<cfif isDefined("URL.error") AND URL.error EQ 1>
	<h2 style="color:red">You must fill out your name and friend's name!</h2>
<cfelseif isDefined("URL.error") AND URL.error EQ 2>
	<h2 style="color:red">The speeds must be numeric!</h2>
</cfif>
---- C O D E   O M I T T E D ----

Challenge Solution:

FlowControl/Solutions/ProcessCalculator-challenge.cfm
               <cfif FORM.yourname EQ "" OR FORM.friendname EQ "">
	<cflocation url="Calculator.cfm?error=1" addtoken="no">
<cfelseif NOT isNumeric(FORM.yourspeed) OR NOT isNumeric(FORM.friendspeed)>
	<cflocation url="Calculator.cfm?error=2" addtoken="no">
</cfif>
<html>
<head>
	<title>Calculate Speeds</title>
</head>
---- C O D E   O M I T T E D ----

Next