Using Validation Controls
Using Validation Controls
Now that you have an understanding of what validation controls can do, let’s have a look at the different controls that are available in ASP.NET:
RequiredFieldValidator
RangeValidator
RegularExpressionValidator
CompareValidator
CustomValidator
ValidationSummary
If you’re working with Visual Web Developer, you can see the validation controls in the Validation tab of the Toolbox, as Figure 6.4 illustrates.
Figure 6.4. Accessing the validation controls in Visual Web Developer
Validation controls are a particular kind of web server control, and are inserted as tags with the asp: prefix. Once a validation control is inserted, it validates an existing control elsewhere on the page, and presents an error message to the user if necessary. To validate a field, all you have to do is insert a control—there’s no
229
Chapter 6: Using the Validation Controls
JavaScript or clumsy server-side code to write by hand! Let’s take a look at these ASP.NET validation controls in detail.
RequiredFieldValidator
The RequiredFieldValidator control is the simplest of the validation controls.
It does exactly what its name suggests: it makes sure that a user enters a value into a web control. We used the RequiredFieldValidator control in the login page example presented earlier:
File: Login.aspx (excerpt)
<p>
Username:<br />
<asp:TextBox id="usernameTextBox" runat="server" />
<asp:RequiredFieldValidator id="usernameReq" runat="server" ControlToValidate="usernameTextBox" ErrorMessage="Username is required!" SetFocusOnError="True" Display="Dynamic" />
</p>
<!-- Password --> <p>
Password and Confirmation:<br />
<asp:TextBox id="passwordTextBox" runat="server" TextMode="Password" />
<asp:RequiredFieldValidator id="passwordReq" runat="server" ControlToValidate="passwordTextBox" ErrorMessage="Password is required!" SetFocusOnError="True" Display="Dynamic" />
<asp:TextBox id="confirmPasswordTextBox" runat="server" TextMode="Password" />
<asp:RequiredFieldValidator id="confirmPasswordReq" runat="server" ControlToValidate="confirmPasswordTextBox" ErrorMessage="Password confirmation is required!" SetFocusOnError="True" Display="Dynamic" />
</p>
As you can see, three RequiredFieldValidator controls are used on this page. The first validates the usernameTextBox control, the second validates the passwordTextBox control, and the third validates the confirmPasswordTextBox control. These assignments are made using the ControlToValidate property of the RequiredFieldValidator controls. The ErrorMessage property contains the error message that will be displayed when the user fails to enter a value into each control.
230
CompareValidator
CompareValidator
One of the most useful validation controls is the CompareValidator control, which performs a comparison between the data entered into a given control and some other value. That other value can be a fixed value, such as a number, or a value entered into another control.
Let’s look at an example that builds on the login example from the previous section. Here, we’ll validate that the data entered into both the password fields is identical. Make the following changes to Login.aspx:
File: Login.aspx (excerpt)
<asp:TextBox id="passwordTextBox" runat="server"
TextMode="Password" />
<asp:TextBox id="confirmPasswordTextBox" runat="server"
TextMode="Password" />
<asp:CompareValidator id="comparePasswords" runat="server" ControlToCompare="passwordTextBox" ControlToValidate="confirmPasswordTextBox" ErrorMessage="Your passwords do not match up!" Display="Dynamic" />
</p>
Run the page and enter different passwords into the two fields. The CompareValidator control will appear as soon as you move on from two fields whose data doesn’t match, as Figure 6.5 shows.
Figure 6.5. A CompareValidator in action
231
Chapter 6: Using the Validation Controls
As you’ve probably noticed, the CompareValidator control differs very little from the RequiredFieldValidator control:
File: Login.aspx (excerpt)
<asp:RequiredFieldValidator id="confirmPasswordReq" runat="server" ControlToValidate="confirmPasswordTextBox" ErrorMessage="Password confirmation is required!" SetFocusOnError="True" Display="Dynamic" />
<asp:CompareValidator id="comparePasswords" runat="server" ControlToCompare="passwordTextBox" ControlToValidate="confirmPasswordTextBox" ErrorMessage="Your passwords do not match up!" Display="Dynamic" />
The only difference is that in addition to a ControlToValidate property, the CompareValidator has a ControlToCompare property. We set these two properties to the IDs of the controls we want to compare. So, in our example, the
ControlToValidate property is set to the confirmPasswordTextBox, and the ControlToCompare property is set to the passwordTextBox.
The CompareValidator can be used to compare the value of a control to a fixed value, too. CompareValidator can check whether the entered value is equal to, less than, or greater than, any given value. As an example, let’s add an age field to our login form:
File: Login.aspx (excerpt)
<!-- Age --> <p>
Age:<br />
<asp:TextBox id="ageTextBox" runat="server" /> <asp:RequiredFieldValidator id="ageReq" runat="server"
ControlToValidate="ageTextBox" ErrorMessage="Age is required!" SetFocusOnError="True" Display="Dynamic" />
<asp:CompareValidator id="ageCheck" runat="server" Operator="GreaterThan" Type="Integer" ControlToValidate="ageTextBox" ValueToCompare="15" ErrorMessage="You must be 16 years or older to log in" />
</p>
In this case, the CompareValidator control is used to check that the user is old enough to log in to our fictitious web application. Here, we set the Operator property of the CompareValidator to GreaterThan. This property can take on any of the values Equal, NotEqual, GreaterThan, GreaterThanEqual, LessThan,
232