9.1. The RequiredFieldValidator

Let's start with one the simplest validator: the RequiredFieldValidator, which ensures that the user provides a value for your control.

To begin, start by creating a new web application named Validators. Select the Default.aspx page in Design view, and set its Title property to Validation Page. While still in Design view, type in Please enter bug reports here, then press Enter.

Next, you'll create the simple bug reporting form shown in Figure 9-1. (Detailed instructions follow shortly.)

When the user presses the Submit Bug button, the form is validated to ensure that each field has been modified. If not, the offending field is marked. You might mark it with a red asterisk, or with a meaningful prompt indicating what is wrong, as shown in Figure 9-2.

If you switch to Source view, you'll see the Visual Studio created a default <form> tag for you already, with an ID of form1. Change the ID to frmBugs.

To create this form, you'll put the controls inside a three-column table, with the first column containing right-aligned text (or labels). The easiest way to do this is to open the HTML section of the toolbar and drag an HTML table onto the form. You can then expand that table (which will initially be three rows by three cells) so that each cell is large enough to type in or to drag a control into.

Figure 9-1. The bug report

Figure 9-2. Bug report with error prompts

If you put the cursor in the bottom-right cell and press TAB, the table will add a new row and place the cursor in the bottom-left cell.

Click on the arrow above the left-most column and set its align property to right or just set the property by hand in Source view:

     <td align="right">     </td> 

Type the prompt Book: in either Source or Design view. In Source view, the new <td> section should look like this:

     <td align="right">     Book:     </td> 

Next, drag a drop-down list into the center column. Set its ID to ddlBooks. Click on its smart tag, then choose Edit Items... to add book titles to the list. Set book 0 (zero) to Please Pick A Book . Then add the other books shown in Figure 9-3 (or as many as you feel like entering).

Figure 9-3. Using the ListItem Collection Editor ListItem Collection Editor

The Toolbox is divided into sections. Open the Validation section, as shown in Figure 9-4.

Figure 9-4. Validation controls

Drag a RequiredFieldValidator into the third column. This validator is designed to ensure that a given control (in this case, the drop-down list) has a valid entry (in this case, any entry except the very first) that is, that the user has made a choice.

After you drop the control into its column, click on the control and then set its properties in the Properties windows, as shown in Table 9-1.

Table 9-1. Attributes for first validator

Property	Value	Explanation
(ID)	reqFieldBooks	The ID of the validation control itself.
ControlToValidate	ddlBooks	The ID of the control to be validated (in this case, the drop-down list).
Display	Static	See the description later in this chapter.
InitialValue	Please Pick A Book	If this value is set, the user must choose a value that does not match this value for the control to be valid (useful for drop-down lists, as shown here).
SetFocusOnError	true	If this is true, and if this is the first control on the page that is not valid, focus will be placed here. There is almost never a reason to set this false, which is why, of course, false is the default!
Text	"You did not pick a book"	The text to show if the control is not valid.

The Display element can take one of three values: Dynamic, None, and Static. If you type this property into the Source window, IntelliSense will help by offering the valid values when you hit the equal sign, as shown in Figure 9-5.

Figure 9-5. Choosing the Display value

If you choose Dynamic, no room will be allocated in the table for the error message; if you choose Static, then the room will be allocated even if no error message is visible. Which you choose will be decided by how you want your page to look before and after an error (dynamically allocated error messages may shift the controls around to make room for the error message). If you do not enter the property, it defaults to Static. Set the property value to Static, or accept the default.

You are now ready to set up your second row. Set the prompt to Edition:. In the second column add a RadioButtonList and call it rblEdition. Use the Edit Items... option to add four items: 1st, 2nd, 3rd, and 4th. Set its RepeatLayout property to Flow.

Next, drag a RequiredFieldValidator into the third column. The attributes for this second RequiredFieldValidator are shown in Table 9-2.

Table 9-2. Attributes for second validator

Property	Value	Explanation
(ID)	reqFieldEdition
ControlToValidate	rblEdition	Notice that you can set this through a drop-down list in the Property window (nifty).
Display	Static
InitialValue	(blank)	Leave this field blank; not needed for validation of the radio buttons.
SetFocusOnError	true	See Table 9-1.
Text	Please pick an edition to validate

Set up the third row. The prompt in the first column is Bug:. Drop a TextBox into the second column, and give it an ID of txtBug. Set its TextMode property to MultiLine. These are the only significant elements in this control (besides the requisite runat=server, of course).

Drag a RequiredFieldValidator into the third column. Its attributes are shown in Table 9-3.

Table 9-3. Attributes for third validation control

Property	Value	Explanation
(ID)	reqFieldBug
ControlToValidate	txtBug
Display	Static
InitialValue	(blank)	Leave this field blank. You could give the text field an initial (must change) value, but, in this case, we'll start out with an empty text box.
SetFocusOnError	true	See Table 9-1.
Text	Please provide bug details

The fourth row of the table will be occupied by the Submit button, which triggers the page validation. Add a Button control to the first column of this row, and give it an ID of btnSubmit. Set its Text property to Submit Bug.

Go to Source view and examine the HTML that has been produced, shown in Example 9-1.

Example 9-1. Validation controls

 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Default_aspx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">    <title>Validation Page</title> </head> <body>    <form  runat="server">       Please enter bug reports here<br />       <br />       <table >          <tr>             <td align="right">                Book:             </td>             <td>                <asp:DropDownList  runat="server">                   <asp:ListItem>                       -- Please Pick A Book --                   </asp:ListItem>                   <asp:ListItem>                        Programming Visual Basic 2005                   </asp:ListItem>                   <asp:ListItem>                      Programming C# A Developer's Notebook                   </asp:ListItem>                   <asp:ListItem>Programming C# 2.0</asp:ListItem>                   <asp:ListItem>                      Programming Windows Applications                   </asp:ListItem>                   <asp:ListItem>                      Teach Yourself C++ In 21 Days                   </asp:ListItem>                   <asp:ListItem>                      Teach Yourself C++ In 24 Hours                   </asp:ListItem>                   <asp:ListItem>TY C++ In 10 Minutes</asp:ListItem>                   <asp:ListItem>TY More C++ In 21 Days</asp:ListItem>                   <asp:ListItem>Beg. OO Analysis &amp; Design</asp:ListItem>                   <asp:ListItem>Clouds To Code</asp:ListItem>                 </asp:DropDownList>             </td>             <!-- Validator for the drop-down -->             <td align=center rowspan=1>                <asp:RequiredFieldValidator                                ControlToValidate="ddlBooks"                Display="Static"                InitialValue="-- Please Pick A Book --"                Width="100%" runat=server>                You did not pick a book                </asp:RequiredFieldValidator>            </td>          </tr>          <tr>             <td align=right>                Edition:             </td>             <td>                   <ASP:RadioButtonList id=rblEdition                   RepeatLayout="Flow" runat=server>                      <asp:ListItem>1st</asp:ListItem>                      <asp:ListItem>2nd</asp:ListItem>                      <asp:ListItem>3rd</asp:ListItem>                      <asp:ListItem>4th</asp:ListItem>                   </ASP:RadioButtonList>                </td>                <!-- Validator for editions -->                <td align=center rowspan=1>                   <asp:RequiredFieldValidator                                      ControlToValidate="rblEdition"                   Display="Static"                   InitialValue=""                   Width="100%" runat=server>                      Please pick an edition                   </asp:RequiredFieldValidator>                </td>          </tr>          <tr>             <td align=right style="HEIGHT: 97px">               Bug:             </td>             <!-- Multi-line text for the bug entry -->             <td style="HEIGHT: 97px">               <ASP:TextBox id=txtBug runat=server width="262px"               textmode="MultiLine" height="84px"/>             </td>             <!-- Validator for the text box-->             <td style="HEIGHT: 97px">               <asp:RequiredFieldValidator                              ControlToValidate="txtBug"               Display=dynamic               Width="100%" runat=server>                 Please provide bug details               </asp:RequiredFieldValidator>             </td>          </tr>          <tr>             <td align="right">               <ASP:Button id=btnSubmit               text="Submit Bug" runat=server />             </td>          </tr>       </table>    </form> </body> </html> < 

Now build and run the application. Your web page should look like Figure 9-6 (which is the same as Figure 9-2, and is shown again here for your convenience).

Figure 9-6. Bug report with prompts