Validation simply means information is checked before it's passed on. No one likes bogus submissions. Bad data is a waste of time and a big pain in the butt. To make sure that we don't waste our time with bad submissions, we're going to add validation to our form.
First, we are going to add client-side validation using JavaScript. But wait! Before you run out and reread Thau's masterful tutorial, take a seat. One of the great things about ColdFusion is that it has built-in JavaScript validation routines. Does it sound too cool to be true? Well it's not.
The first thing you'll need to do is convert all those crusty <INPUT> tags to <CFINPUT>. The <CFINPUT> tag is one of those extended controls that ColdFusion users adore. It has two extremely flavorful options: validation and requirement. You already know what validation means. Requirement means that if information is not valid, an alert box will honk at you until good data is entered. Let's make the simple changes to <CFINPUT> that will get this done.
If you're using ColdFusion Studio, right-click on the tag. You should see a dialog box that looks a lot like this. There are many options here, but for now we want to make sure the Required checkbox is on. We also need to verify that a suitable warning message is set in the Message field. For the phone and ZIP fields, see that you select the correct validation types from the dropdown box (these are the telephone and ZIP code options, respectively).
If you don't have ColdFusion Studio or you're a command line honcho who thinks dialog boxes are for wimps, you can add validation to your form manually. All you have to do is add three attributes to your <CFINPUT> tag: REQUIRED, VALIDATE, and MESSAGE. If you set Required to "Yes," the form won't submit if the field is blank. If users try to do it anyway, they 'll get whatever you put in the MESSAGE attribute. VALIDATE lets you check to ensure that the form input is in a certain format. If it's not, you'll get the MESSAGE attribute. Available formats are integer, long, date, eurodate, time, telephone, ZIP code, credit card, and Social Security number.
If we were going to add validation and requirement to the phone field, our code would look like this:
<cfinput type="Text" name="phone" message="Please enter your phone number in XXX-XXX-XXXX format." validate="telephone" required="Yes" size="12" maxlength="12">
When you've made changes to every one of the tags, it will look something like this.
Pretty neat, eh? But we're not done validating yet. Next we're going to make sure the server validates the data.
next page»
