Adding Server-Side Form Validation

As you discovered in the previous task, the application works well when the user enters numbers in both fields. But if the user leaves one blank or enters a non-numeric character, an unsightly error message appears when she or he clicks Submit. Error messages such as the one shown earlier were meant to help developers debug applications; ideally, users should never see them.

To prevent the possibility of this error occurring, you can add form validation to ensure that the requisite numbers have been entered. You used form validation with the email form in Lesson 6. That was client-side form validationusing a Dreamweaver behavior, you added a JavaScript form validation script that fired as soon as the user clicked the Submit button. That was certainly easy to deploy, but as you'll remember, the JavaScript error pop-up that appeared when the form was not filled in correctly wasn't terribly helpful.

In this task, you will add form validation on the server-side; that is, you will write some ASP or ColdFusion code to verify that numbers were entered. If they were not, a hidden region of the HTML page will appear indicating an error. Because the error will be coded in HTML, you can make it say whatever you want, and you can also format it however you want.

The process will be as follows: The user fills out the form and clicks Submit. The page tourprice_processor.asp is requested. At the top of that page is a small form validation script that verifies that numbers were entered in both fields. If numbers were entered in both fields, then the page processes as normal. If numbers were not entered in both fields, the user is redirected back to tourprice.asp, and the once-hidden HTML region with an error message is revealed.

To create this functionality, we need to write the form validation script, which you'll do in this task. Then, in the next task, you'll create the HTML error region and hide it. Finally, you'll format the text in the HTML error region using CSS.

Now that you understand the big picture, let's sketch how this form validation script is going to work. First, we are using it for flow control. That is, depending on whether the user entered the proper data, the script needs either to continue to do the calculation or to redirect the user back to tourprice.asp. Handling flow control based on conditions is easy, using if…else constructs. The following pseudocode maps out the intended functionality of the script:

if the user entered a non-numeric or null value in either field
  redirect the user back to tourprice.asp
  continue as usual
end if

We'll further refine this script in two ways. The first is that you don't need to spell out the else portion if you just want to continue as usual. Thus, we really only need the if half of the script.

The second refinement is that you don't merely want to redirect back to tourprice.asp; you also want to send a trigger that will change the visibility of the hidden region. In this case, a querystring/URL variable will do the job. Then, you'll add a script that looks for the presence of that URL variable, and if it is there, it will display the region. If it is not, the region will be hidden. Don't worry if this seems abstract; you'll get plenty of practice with it by the end of this lesson. The final pseudocode for the form validation script looks as follows:

if the user entered a non-numeric or null value in either field
  redirect the user back to tourprice.asp with a querystring
end if

Now that we have a plan, let's write some code.

  1. Open tourprice_processor.asp. Make some room at the top of the document, before the calculation script you wrote in the previous task, for a new script.

    The form validation script should be at the beginning, because you don't want ASP or ColdFusion to attempt the calculation when you haven't even verified that the proper form values exist.

    ASP users: Be sure that space for the new code is below the <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%> line, which should always remain as the first line.


    When building script blocks, add some extra space above and below to help set them apart visually.

  2. Create the outer shell of the script, using if and testing whether each of the form variables is numeric.

    In ASP:

    [View full width]
    <% If Not IsNumeric(Request.Form("numadults")) or Not IsNumeric(Request.Form("numchildren")) graphics/ccc.gifThen End If %>

    In ColdFusion:

    <cfif Not IsNumeric(form.numAdults) or Not IsNumeric(form.numChildren)>

    The empty line in each code block is set aside for the code you'll add in the next step.

    Both ASP and ColdFusion have a function, IsNumeric, which tests whether the enclosed parameter is numeric. If it is, it returns true. If not, it returns false. Because you want to redirect if the value is not numeric, you add the word Not to invert the output of the IsNumeric function. Finally, because you are checking two fields, rather than one, they have to be listed separately, connecting them with or.

  3. Add the inner action that is executed if the if clause evaluates to true.

    In ASP, indented in the blank line beneath the if statement:


    In ColdFusion, indented in the blank line between the opening and closing <cfif> tags:

    <cflocation url="tourprice.cfm?error=notnumeric">

    Response.Redirect() is an ASP function that sends the browser to the URL specified. Likewise, ColdFusion's <cflocation> also redirects the browser. In addition to specifying the URL, you've also added a querystring. You'll add a script back on tourprice.asp that looks for this querystring, using if…else to control the visibility of the error region.


  4. Save and upload tourprice_processor.asp. Test tourprice.asp.

    You'll see that if you don't enter numbers in both fields, not only are you stuck on tourprice.asp, but also the querystring variable appears in the Address bar. It's not being used yet, but it's there. Its presence enables both ASP and you to distinguish between when the page first loads, and when it loads because of an error.