Form Validation With FrontPage 98

This is the 3rd in a series of articles discussing forms with FrontPage 98. The first article discussed creating forms, and the second discussed form handlers. One thing I forgot to add, by the way, concerning form handlers: The Registration component doesn't work on the Microsoft NT platform, but will work on UNIX. I know this sounds strange, but it is true. Just wanted to make sure that anyone reading these articles knows about this limitation of the Registration component. In any case, let's move on to form validation.

Part 3: Form Validation

When a user inputs data into a form, there are times when it's important that the input has a certain format. For example, let's say that you have a database with a table containing information about your users. The table has a text field called "Name." The field is 30 characters long. It has a numeric field called "Age." And it has a text field called "Password," that is 10 characters long. You have created a form to get users to enter this information into the table. What happens if the person doesn't fill out one of the fields? What happens if they type in "Thirty-five" into the "Age" box? What happens if they use a password that is already being used by another person, and the password has to be a unique value? How do you make sure that the information is there, and is in the right format? You use form validation.

There are several ways to handle form validation, and FrontPage is well-equipped to help you along the way. The simplest method is to use the FrontPage Form Validation component. This creates a Javascript function that checks for the characteristics you define, and won't allow the form to submit unless the form is correctly filled out. There is one minor drawback to this, though, and that is that browsers that don't support Javascript won't run the function. There are still a few of them out there, but not many.

If you're capable of running ASP (your web is on an NT server running IIS), there is another solution: Run a server-side script in the ASP page which recieves the form data. The script checks the data and uses if/else conditional scripting to either generate an error message that directs the user back to the form page, or the results of the form input.

FrontPage Validation Component

To use the FrontPage Form Validation Component, create your form field. Then right-click it, and select "Form Field Validation" from the popup menu. Each form field has its' own dialog box. The following is the text box (and scolling text box) validation dialog:

Let's talk about the Data Type property first. This ensures that the proper format of data is typed in. It offers 3 options:

• Text - When you select text format, you must fill out the text format box below. By checking any of the 3 checkboxes, you allow that form of text to be input. If you check the 4th checkbox, you can specify additional allowable characters to be input. Just type in the characters which you wish to allow.
• Integer - This allows whole numbers only to be input. When you use this, you must specify the "Grouping" in the box below. This defines whether the comma or period can be used to group your thousands. In most cases where you are inputting data into a database, you will want to choose "None," as commas and periods are not usually recognized by the ODBC driver.
• Number - Why they called this "Number" instead of "floating point" or something more descriptive, I'll never know. This allows the user to enter floating point decimals, such as currency amounts. It corresponds to the "Decimal" box below, which gives you the opportunity to specify which decimal point is allowed, the period or comma.

The Data Length property settings are used to specify whether input is required (no empty field allowed), and/or the minimum and maximum length of data to be allowed.

The Data Value property is used to compare the input to a value. For example, let's say the user enters a numeric value. If you want it to be limited in its' value, set the high and/or low values for it here.

The Display Name box at the top will be enabled once you set any of these validation rules. It is used to give a descriptive name for the form field when the error message is produced. For example, you may have a text box for a person's name, called "T1." However, by filling out this field, you can have the error message say "Name" instead, or any other descriptive name you choose.

The only other form fields which can require validation are the drop-down list box and radio buttons. Each of these can be required to be checked. In addition, you can disallow the first item in a list box. This is useful when, for example, you are concerned that the user may not make a choice in the list box, but simply leave it alone, resulting in whatever item is in the top to be selected. This may give you erroneous results. Instead, you can put something like "Select one" in the top option, and check the "Disallow first item" box in the drop-down list box validation dialog. The user will be required to select one of the other options instead.

Adding Your Own Scripting

There may be times when you want to add  scripting to your validation script. for example, you may want to populate some hidden form fields, or do some calculations before the form is submitted. The program won't allow you to do this. If, for instance, you open the HTML View for the page, you won't see the Javascript validation script. It is hidden, because it is dynamically generated by the validation component, which won't allow you to make changes to it. If you open the page in a text editor, you will see the script, but if you make any changes to it, they will magically disappear when you open the page in FrontPage Editor. So, how do you add to the script? Well, it's not too hard to do:

1. Open the page in a text editor, and copy the scripting code to your clipboard.
2. Close the page, and open it in FrontPage Editor.
3. Remove all form field validation from your form fields. This removes the script and the component references. You can also do this by hand, but be sure to remove all references to validation components from each form field. It's easier the other way.
4. Insert a new script in the top of the page, and paste the code from your clipboard.
5. Add your own code to the script.
6. Click the "Script Wizard" button.
7. In the left-hand pane of the wizard, locate the "onSubmit" property of the form and highlight it.
8. in the code box below type in something to the effect of: "return whateverthefunctionnameis(this)"
9. Close the Script wizard.

ASP Form Validation

As I mentioned earlier, you can also use server-side scripting to validate your forms. This requires a bit of programming, as does all ASP. But I have a sample from another web site I've designed, to demonstrate how this is done:

The following block of code gets the value of 2 form fields, "number" and "pword." It then checks the values of these, and adds error messages to an array called "err." It sets the value of "x" to 0, and each time it encounters an error, it increments "x." This is used to add error messages to the validation script, and later, to check whether there are errors, and to write them from the array to the page:

dim err()
number = Request.Form("number")
pword = Request.Form("pword")
x = 0
if number = "" then
Redim Preserve err(x)
err(x) = "You must enter a value for the Number field.<br>"
x = x + 1
elseif isNumeric(number) = 0 then
Redim Preserve err(x)
err(x) = "The Number field must only contain digits.<br>"
x = x + 1
end if
if pword = "" then
Redim Preserve err(x)
err(x) = "You must enter a value for the Password field.<br>"
x = x + 1
end if

This is followed by more code. Then the following script is called:

if x > 0 then

This is followed by some HTML indicating that there were errors, and a link back to the form page. It indicates the nature of the errors, and enumerates them with the following script:

    for i = 0 to x - 1
        Response.Write i + 1 & ". " & err(i)
    next
else

Follow this with the rest of the page. Here's what the results would look like, using the page that this code came from:

As I said, the advantage to this technique is that the script is run on the server. So, browsers that don't support Javascript won't cause problems. Simple, huh? ;-)

Well, that's it for forms. You should have a PhD in form design by now. I hope you enjoyed it. I certainly did.

See you next week!

Author: Kevin Spencer
Date: 02/06/98

More articles about Microsoft FrontPage
More articles by Kevin Spencer
Author Biography