6	Using the Validation Controls

Ever needed to ensure that a user typed an email address into a text box? Or wanted to make sure that a user typed numbers only into a phone number field? Validation involves checking that the data your application’s users have entered obeys a number of predefined rules. To help developers with the most common data validation tasks, ASP.NET provides a set of validation controls that ease the problems that beset web developers in the past. This chapter will show you how to use them.

There are two kinds of form validation, differentiated by where the validation takes place. You could write client-side JavaScript code that validates the data typed by the user directly into the browser (client-side validation), or you could use server-side VB or C# code to validate the user input once the form has been submitted to the server (server-side validation).

Client-side validation has its benefits, chief among them the fact that it provides instant feedback to users. If users fail to enter their names into a text box, the page automatically displays an error message. The users know immediately that they need to enter their names—they don’t need to wait for a response from the server to tell them so. The process is quick and efficient, and good for the overall user experience.

However, there’s one big drawback with client-side validation: users must have JavaScript enabled in their browsers, or validation simply will not occur. Some

Chapter 6: Using the Validation Controls

browsers, such as those built into PDAs and mobile telephones, don’t support JavaScript, so client-side validation doesn’t work for users of those browsers. Thus, though client-side validation is a great way to increase the usability of your site, it’s not a foolproof method of ensuring that the data entered into your form passes all your rules.

While client-side validation is optional, server-side validation is not. For this reason, developers frequently choose to implement only server-side validation methods. Server-side validation is necessary because it’s our last line of defense against bogus user data. The downside to server-side validation is that the application has to make a trip to the server before users can be alerted to any errors in their data.

Introducing the ASP.NET Validation

Controls

ASP.NET includes controls that make validation a snap. The ASP.NET validation controls, while primarily being useful for implementing client-side validation, make it easier to implement server-side validation as well. The ASP.NET validation controls generate the JavaScript required for basic validation tasks for you (so you don’t need to deal with any JavaScript code yourself); then, once the page is submitted, you can use the controls to check on the server whether or not the client-side validation was successful.

ASP.NET’s validation controls provide client-side validation capabilities while virtually eliminating the need for developers to know JavaScript. Better still, they don’t require complex server-side scripting. To use ASP.NET validation controls, we just add an object to the page and configure some simple properties.

As our first step towards demonstrating the ASP.NET validation controls, we’ll create a number of simple pages in the Learning folder we worked with in previous chapters. Then we’ll update the Dorknozzle intranet, adding validation features to the Help Desk page.

Opening Learning in Visual Web Developer

If you’d like to follow these examples in Visual Web Developer, feel free. You can open Learning as a web site by selecting File > Open Web Site…, navigating to the Learning folder (most likely C:\WebDocs\Learning\), and clicking Open. The view in Solution Explorer will be populated with any files you have in the Learning folder.

220

Introducing the ASP.NET Validation Controls

To start with, let’s create a simple login web form. Create a file named Login.aspx and modify it as shown below. The parts that differ from the Visual Web Developer template are highlighted.

File: Login.aspx (excerpt)

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Simple Login Page</title> </head>

<body>

<form id="form1" runat="server"> <div>

<!-- Username --> <p>

Username:<br />

<asp:TextBox id="usernameTextBox" runat="server" /> <asp:RequiredFieldValidator id="usernameReq"

runat="server"

ControlToValidate="usernameTextBox" ErrorMessage="Username is required!" />

</p>

<!-- Password --> <p>

Password:<br />

<asp:TextBox id="passwordTextBox" runat="server" TextMode="Password" />

<asp:RequiredFieldValidator id="passwordReq" runat="server" ControlToValidate="passwordTextBox" ErrorMessage="Password is required!" />

</p>

<!-- Submit Button --> <p>

<asp:Button id="submitButton" runat="server" Text="Submit" />

</p>

</div>

</form>

</body>

</html>

Here, we’ve added two RequiredFieldValidator controls, which force the user to type some data into the referenced controls before the form can be submitted. Let’s have a closer look at the first RequiredFieldValidator to see that it does

221

Chapter 6: Using the Validation Controls

its job. It sets a couple of properties, whose names are pretty descriptive (ControlToValidate, and ErrorMessage):

File: Login.aspx (excerpt)

<asp:RequiredFieldValidator id="usernameReq" runat="server"

ControlToValidate="usernameTextBox" ErrorMessage="Username is required!" />

Load this page and immediately click the Submit button without entering text into either field. The page should display as shown in Figure 6.1. When we click the Submit button, we see instantly the error messages that tell us we forgot to type in a username and password.

Figure 6.1. Validation controls at work

The beauty of ASP.NET validation controls is that they determine whether or not the browser is capable of supporting client-side validation. If it is, ASP.NET automatically includes the necessary client-side JavaScript; if not, it’s omitted and the form is validated on the server.

ASP.NET 2.0 and Client-side Validation

In previous versions of ASP.NET, these controls demonstrated a tendency to assume that non-Microsoft browsers, such as Firefox, do not support JavaScript. As ASP.NET’s client-side validation relies on JavaScript, clientside validation was not supported in those browsers and users had to rely on these controls’ server-side validation.

ASP.NET 2.0 now recognizes the JavaScript capabilities of these browsers, so client-side validation is now available to all modern browsers, including Opera, Firefox, and others. However, it’s important not to forget that

222