Wednesday, 27 July 2011

ValidationGroup Control on Multiple Forms in ASP.NET


In this tutorial, we will cover the basics of ASP.NET validation techniques. This involves using more advanced validation controls and ValidationGroups to group validation controls together.

Form validation is important for the recipient to collect the correct information and for the user to send the correct information. It isn't uncommon for a webpage to have multiple forms. Your front page may have a voting form and email newsletter signup form. Without validation groups the validations would interfere with each other by not allowing the user to submit either form unless both forms were filled out correctly. Validation groups allow the developer to set groups for each validation control and button.

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.

First you can start a new Web Application in Visual Studio 2008. We are going to create a form. This form is going to contain a DropDownList, RangeValidator, and Button control. You can add all of these controls through the Toolbox. Below is an example of them.

Articles: <asp:DropDownList ID="ddArticle" runat="server">
    <asp:ListItem Text="Choose an article" Value="0" Selected="True" />
    <asp:ListItem Text="Using Literal Control" Value="1" />
    <asp:ListItem Text="Connecting to a SQL Database" Value="2" />
    <asp:ListItem Text="Uploading a File to a Database" Value="3" />
    <asp:ListItem Text="Creating an AJAX AutoSuggestion Box" Value="4" />
</asp:DropDownList>&nbsp;&nbsp;&nbsp;&nbsp;
<asp:RangeValidator ValidationGroup="valGroup" ControlToValidate="ddArticle" ID="reqArticle" MinimumValue="1" MaximumValue="99" runat="server" ErrorMessage="Please choose an article." /><br />
<asp:Button UseSubmitBehavior="true" ValidationGroup="valGroup" ID="btnSubmit" Text="Submit" runat="server" /><br /><br /><br />

Notice that the RangeValidator and Button control both have the ValidationGroup attribute set to the same name. This allows the application only to check the DropDownList's validity when the user clicks the Submit button.

For tutorial purposes, we will place another form on the same page. This form will contain a Calendar control, 3 TextBox controls, and 3 validator controls. The first 2 TextBox controls will be for entering in the user's email address twice. The first TextBox control will belong to a RequiredFieldValidator and CompareValidator. The RequireFieldValidator will make sure the user has entered an email address. The CompareValidator will make sure the user has entered the same email address twice. The Calendar and TextBox will allow the user to select a date for the form. A RangeValidator control will be used to make sure the date is in the month of December 2008.

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

Email: <asp:TextBox ID="txtEmail" runat="server" /><br />
Retype Email: <asp:TextBox ID="txtEmail2" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;
<asp:RequiredFieldValidator ID="reqEmail" ControlToValidate="txtEmail" ValidationGroup="valGroup2" runat="server" ErrorMessage="Please enter an email address." />
<asp:CompareValidator id="compEmail" ValidationGroup="valGroup2" runat="server" ControlToValidate="txtEmail"
    ControlToCompare="txtEmail2" Type="String"
    Operator="Equal" ErrorMessage="Emails do not match." />
<asp:ScriptManager ID="scrMgr" runat="server" />

<asp:UpdatePanel ID="updPnl" runat="server"> 
<ContentTemplate>
            <asp:Calendar ID="calDate" runat="server" 
                onselectionchanged="calDate_SelectionChanged">
                <TodayDayStyle ForeColor="White" BackColor="Black"></TodayDayStyle>
            </asp:Calendar><br />
            Date: <asp:TextBox ID="txtDate" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>&nbsp;&nbsp;&nbsp;&nbsp;
<asp:RangeValidator ValidationGroup="valGroup2" Type="Date" ControlToValidate="txtDate" ID="reqDate" MinimumValue="12/1/2008" MaximumValue="12/31/2008" runat="server" ErrorMessage="Date choosen must be during the month of December of 2008." /><br />
<asp:Button UseSubmitBehavior="true" ID="btnSubmit2" ValidationGroup="valGroup2" Text="Submit" runat="server" />

Notice the Type attribute for the CompareValidator and RangeValidator control. If the value being validated is not an integer, the validation controls will not work properly unless their correct Type is set. All of the validation controls also have the ValidationGroup attribute set as valGroup2. This will distinguish the validation for this form from the validation in the first form.

To make this example complete we will need to program our application to set the TextBox date to the date selected by the calendar. You can do this by double-clicking the Calendar control in design mode. Now set the TextBox to the selectedDate formated to match our RangeValidator.

//C#
protected void calDate_SelectionChanged(object sender, EventArgs e)
{
     txtDate.Text = calDate.ToShortDateString();
}

//VB.NET
Protected Sub calDate_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs)
     txtDate.Text = calDate.ToShortDateString()
End Sub

Due to the fact that the validation controls use Javascript, the page will instantly display an error when a form control isn't valid. The user will not be allowed to submit the form until all fields for the current form are valid. We also placed the Calendar control in AJAX controls so choosing the date will not refresh the entire page. It is important to note that the error messages can be organized together in a list by using the ValidationSummary control.

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

You have successfully learned how to use a validation control on a date field and matching email address fields. You have also learned how to add two different forms to a page with separate validation groups.

Looking for more ASP.NET Database Tutorials? Click Here!

No comments:

Post a Comment