- The Web Programming Model
- Using Standard Web Forms Controls
- Using Advanced Web Forms Controls
- Using the Validator Ccontrols
- Summary
- Q&A
- Workshop
- Answers for Chapter 10
Using the Validator Ccontrols
When you are writing data entry forms for the web, you must often need to make certain that the form is filled out correctly. This would mean that certain fields are filled in, others are filled in, but with values that fit into a range, and so on. In the past, this was could either be done by writing code at either at the server or at the client. If the code is at the server, it might result in causing the information to be passed between the client and server needlessly. If you would rather place the code at the client, you run into the problem with cross-browser capabilities.
There are a number of Validator controls that come with Visual Basic.NET that make form validation much easier. The controls will either process the validation at the server, or at the client if the control determines that the browser is capable of it. There are five validation controls that are available in Visual Basic.NET:
RequiredFieldValidator – this control ensures that a field has been filled in. You can use it any time that you want to make certain that the user completes a form before submitting it.
CompareValidator – this control ensures either that two fields match, or how a field compares to some value. In the first case, this is useful when you want the user to enter their password twice. Comparing the field to some value would be useful if you wanted the user to enter a positive number, or if it is a particular type of information (for example, a date).
RangeValidator – this control ensures that the value entered in a field is within a range. The range could either be a two values (for example, a starting and ending date), or two controls. This is useful as part of a report, where you might want the user to select a date to display that is within the range of information stored in a database.
RegularExpressionValidator – this control ensures that the value entered "looks" like it should. The value is compared to a 'Regular Expression' (see note). If it matches, the value is considered valid. This can be useful for values that must have a certain structure, such as phone number, ISBN or part number entry fields.
CustomValidator – this control is the most flexible of the Validators. It allows you to add your own code to validate the field. This code could either run at the server, or on the client. This would be useful when one of the other validators does not fit your purpose, or valid information must be determined through some process – for example, if the value must be one of a number of entries that are in a database.
In addition to these five controls, there is also the ValidationSummary control. This control will display all of the error messages from all of the Validator controls on the same page. This is useful to provide a single location for all this information.
The five validation controls have a number of important properties in common. These relate to the control they monitor, and how the error is displayed. The most important of these properties are described in Table 10.4.
Table 10.4 Common properties for the validation controls
|
Property |
Description |
|
ControlToValidate |
This is the most important property of all the validation controls. It should be set to point to another control (by name) on the same form. This is made easier, as you can simply use the drop-down in the Property window to select the monitored control. |
|
ErrorMessage |
This is the message to display if there is an error with the validator, for example, if the field is left blank. This should be enough information to allow the user to determine what is wrong, and how to fix their error. |
|
Display |
This is a rather odd property that defines how the validator control appears on the web page. By default, it is Static, however there are two other choices, Dynamic or None. If Static, it means that the space taken up by the ErrorMessage will always be taken up, even if the ErrorMessage is not being shown. This is useful if you want to guarantee how your web page will be laid out. Dynamic means that the control takes up no space until the ErrorMessage property is shown. This is useful if you don't want blank spaces on your form. Finally, if this property is set to None, the ErrorMessage will never be shown. This is really only useful in conjunction with the ValidationSummary (which will show the error). |
We can use some of these controls to finish our Madlib sample application. We can use RequiredFieldValidator controls to ensure that the user has entered information in certain fields, and the RangeValidator to make certain that an appropriate number has been entered in the txtNumber field. Finally, we can summarize all errors with a ValidationSummary control.
Again, either copy the old project or form, or open the existing project to allow us to edit it. We'll add the Validator controls to this existing form.
Drag a RequiredFieldValidator next to each of the remaining TextBox controls (txtName, txtNumber, txtVerb and txtOccupation). Add a RangeValidator next to the RequiredFieldValidator you added to the txtNumber field. Finally, add a ValidationSummary control on a line of its own between the buttons and the lblResult control. Set the properties of each of these controls as shown in Table 10.5.
Table 10.5 Properties for the Validator controls
|
Control |
Property |
Value |
|
RequiredFieldValidator |
NameID |
reqName |
|
|
ControlToValidate |
txtName |
|
|
ErrorMessage |
Please enter a name |
|
RequiredFieldValidator |
Name(ID) |
reqNumber |
|
|
ControlToValidate |
txtNumber |
|
|
ErrorMessage |
Please enter a number |
|
|
Display |
Dynamic |
|
RangeValidator |
Name(ID) |
rngNumber |
|
|
ControlToValidate |
txtNumber |
|
|
ErrorMessage |
Please enter a number between 100 and 1000 |
|
|
Display |
Dynamic |
|
|
Type |
Integer |
|
|
MaximumValue |
1000 |
|
|
MinimumValue |
100 |
|
RequiredFieldValidator |
Name(ID) |
reqVerb |
|
|
ControlToValidate |
txtVerb |
|
|
ErrorMessage |
Please enter a verb |
|
|
Display |
Dynamic |
|
RequiredFieldValidator |
Name(ID) |
reqOccupation |
|
|
ControlToValidate |
txtOccupation |
|
|
ErrorMessage |
Please enter an occupation |
|
|
Display |
Dynamic |
|
ValidationSummary |
Name(ID) |
valSummary |
We should take a moment to describe the three properties of the RangeValidator we haven't discussed previously. While the MaximumValue and MinimumValue hopefully make sense in terms of something called a RangeValidator, the Type property is not so obvious. As the RangeValidator might be used to test a number of different types of values (integers, financial values, dates), the Type property identifies the type of information to compare. It can have one of the following values:
String the default, this causes the control to test if the value is alphabetically between the two extremes.
Integer compares the value to the two extremes to make certain that the value fits. Only Integer (whole)values are used.
Double the same as with Integer, but includes the decimal part of the value and extremes.
Currency the same as with Integer, but includes the first four decimals of the value.
DateTime compares the values as though they were dates, so August 27, 1964 would come between November 23, 1963 and April 1, 1986.
Now on to why the validator controls are so useful. To make them work, we don't have to add any additional code. Build and view the new web page (see Figure 10.7). Try leaving some fields blank, delete the 500 that is the default value for the number field. You should see red error messages appearing on the form. If not, try clicking the WriteStory Button. You should see something like what appears in Figure 10.8. Try entering a value outside of the range for the number field. Finally, enter in correct values for all the fields and select the WriteStory Button. All error messages should go away, and our story should be written.
){kind=link}
){kind=link}