"Why validate twice?" you ask. Well, there's no guarantee that your JavaScript screens will catch everything. Users might have old browsers or disabled JavaScript. Also, since many of the validations we're using only check to see that something is input, we can't tell if the user entered useful information or just junk. So once we receive info from the client, we have to double check it on the server to make sure it's OK.
As you've probably guessed, we have to make some modifications to our form. Right now, all of our code is glopped onto one page. We need to take that code and divide it into two parts: a validation module and an input module.
The input module is what we've created so far: the form and all that good stuff. We're going to create a validation module that will process the entered information.
I see you slouching there, sulking, asking, "Why do we have to divide the form into two parts?" The answer is simple: You don't. There are lots of sloppy forms out there that stretch on and on for miles. Feel free to just pile everything together. But when you find an error or need to modify the monster or want to reuse some of the code (gasp!), don't come crying to me.
Once our form has two parts, how do we make sure the correct part is always running? We do this by creating a switch, which is basically an indicator. We are going to determine whether we're just getting input or processing text that's been entered.
First, take the form you are working on and save it as input.cfm. Go to the bottom of that form and add a hidden input element called "step." It should look like this:
<input type="hidden" name="step" value="process">
Remember the plan; when the form is submitted, we want to start processing. By inserting this form element, we can tell the switch when it is time to switch to the other module. Now you should have a form that looks like this.
Next, create a blank document and paste the following code segment into it:
<cfif form.step eq "process">
<cfinclude template="validate.cfm">
<cfelseif form.step eq "input">
<cfinclude template="input.cfm">
</cfif>
Save it as form.cfm. This code will serve as the switch that will tell our form what section to run. Remember the hidden element we just inserted? When a user submits the form, this switch will read that the hidden element "step" was set to "process," and it will activate the validation routine.
But what if a user hasn't submitted a form? Since we want our form to process input only after the form has been submitted, we have to make sure that form.step defaults to "input." We can do this by pasting the code (<cfparam name="form.step" default="input">) into a blank document and saving the document as application.cfm.
Application.cfm is a special ColdFusion document. Anything you put inside it is automatically included in every file in the same directory. The <CFPARAM> tells the computer that if there is no variable named form.step, it should create one and set its value to "input." By putting this definition in application.cfm, we make sure that the value of form.step defaults to "input" on every applicable page. And that ensures that the validation routine will be called only when someone submits the form.
So now that we are finished with the structural changes, it's time to code the validation routine. Let's formulate some rules for validation. The name, city, and state fields should only have letters in them. The address field can have letters, numbers, and punctuation. The phone field can contain dashes. And the ZIP field is going to be all numbers. Using these rules as a guide, we came up with this validation routine. Take a moment to study it;
The validation routine checks the form fields and makes sure that all the info is good. If there are any fields with bad info, these get recorded on an error list and are then sent back to the form. See the sections that look like this:
<cfset validation_error = listappend(validation_error, "zip")>
This is where the form adds the bad fields to the error list.
Once the validation routine is spit out, the code below is run. If there are no names on the error list, it continues processing. But if there are names on the list, this means that some of the information was bad. The user must then go back and fix the bad info.
<cfif listlen(validation_error) gt 0>
<cfinclude template="input.cfm">
<cfelse>
<cfinclude template="process.cfm">
</cfif>
So suppose something goes wrong, and we're back at input.cfm. We need to let the user know that we found some errors. We like to do this by turning the offending field names red. Therefore, we need to implement an error check for each form field. If the form-field name is on the list, then we change its color. If not, we leave it. The code snippet would be:
<CFIF listfindnocase(validation_error, "phone")><FONT color="red"></CFIF>
<CFOUTPUT>Phone:</CFOUTPUT>
<CFIF listfindnocase(validation_error, "phone")></FONT></CFIF>
The final document would look something like this. Test it out to make sure it works and then hurry back here so we can move on.
Now that we have validation kicking, we can move on to the next element of a modern form: memory.
next page»
