Better way to Apply validation on Tab Control of Ajax Toolkit

Introduction

Generally, when we have a requirement to develop a system that contains large amount of controls on the form like User Registration, Patient Information, etc., then one of the best possible ways is to contain these amounts of control at one place is to use Ajax Control Toolkit’s Tab Control.

And if we decide to use the Tab Control then we have to also think about the validations of the controls inside the Tab Control. Because some controls are mandatory on the form, some of them needs date validations, some of them require dependency on other control or some of them require regular expression validations.

How to apply validation in Tab Control of Ajax Toolkit

So what is the best way to use these kinds of validations inside the Tab Control? One of the ways is to check validations when we change the tab or check for the validation while filling information in the control. Another way is to check all validations at once means when end user completes the form or fills all the information on the form and then finally on Save or on Register check all validations that we have set on the controls.

As per my research, best way is to check all the validations at once. Because when we are going to check validations on tab changed event there is a need to call tab changed event and because of that there is a server side call occurs.

So best way is to use JavaScript function for all the validations and call this JavaScript function when user submitting the form.

To do this, First of all put the appropriate server side validation control on the form as per our requirement.

Then for example if we have a User Registration form then we divides the user registration information into separate tabs like we put user’s personal information in Personal Information tab, user’s office information in Office Information Tab, bank information in Bank Information tab, etc.

Now give separate ValidationGroup to each of the tab.

Example

<cc1:TabContainer ID=”MainTabContainer” runat=”server” ActiveTabIndex=”0″ Width=”100%”> <cc1:TabPanel ID=”tabPersonal” runat=”server” TabIndex=”0″>

<HeaderTemplate>

<asp:Label ID=”Label29″ runat=”server” Text=”Personal Information” CssClass=”bodyTxtBold”></asp:Label>

</HeaderTemplate>

<ContentTemplate>

<asp:TextBox ID=”txtUserId” runat=”server” MaxLength=”100″ CssClass=”Textfiled-border verdana11greynormal” Width=”217px” ValidationGroup=”tabPersonal”></asp:TextBox>

<asp:RequiredFieldValidator ID=”rfvUserId” runat=”server” ControlToValidate=”txtUserId” CssClass=”bodyTxtBold” ErrorMessage=”Please enter user id.” ValidationGroup=”tabPersonal” SetFocusOnError=”True” Display=”Dynamic”></asp:RequiredFieldValidator>

</ContentTemplate>

</cc1:TabPanel>

<cc1:TabPanel ID=”tabContact” runat=”server” TabIndex=”1″>

<HeaderTemplate>

<asp:Label ID=”lblContactHeader” runat=”server” CssClass=”bodyTxtBold” Text=”Contact Information”></asp:Label>

</HeaderTemplate>

<ContentTemplate>

<asp:Label ID=”lblOfficeEmail” runat=”server” Text=”E-mail address” CssClass=”bodyTxtBold”MaxLength=”50″></asp:Label>

<asp:TextBox ID=”txtOfficeEmail” runat=”server” CssClass=”Textfiled-border verdana11greynormal” MaxLength=”100″ Width=”80%”></asp:TextBox>

 

<asp:RequiredFieldValidator ID=”rfvOfficeEmail” runat=”server” ControlToValidate=”txtOfficeEmail” CssClass=”bodyTxtBold”ErrorMessage=”Please enter office e-mail.” ValidationGroup=”tabContact” Display=”Static”>

</asp:RequiredFieldValidator>

 

<asp:RegularExpressionValidator ID=”revOfficeEmail” runat=”server” ControlToValidate=”txtOfficeEmail” CssClass=”bodyTxtBold” ErrorMessage=”Invalid e-mail id.” ValidationExpression=”\w+([-+.’]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*” Display=”Dynamic” ValidationGroup=”tabContact”></asp:RegularExpressionValidator>

</ContentTemplate>

</cc1:TabPanel>

</cc1:TabContainer>

In this example, we have a two tab panel inside one tab container named tabPersonal and tabContact. In tabPersonal there is one textbox for user id and in tabContact there is also one textbox to take office e-mail id from user. Also note that we have given same ValidationGroup as the id of tab panel to each control.

Now to call these validations,

<asp:Button ID=”btnSave” runat=”server” ValidationGroup=”tabPersonal, tabContact” CommandName=”Insert” OnClick=”btnSave_Click” OnClientClick=”switchToTab();” />

 

We have one button as above; here we give both the tab panel id to the button’s ValidationGroup and on client click of button we have to call our JavaScript as OnClientClick=”switchToTab();”

Here is our JavaScript function,

function switchToTab(sender,args)

{

var tabContainer = $find(“<%= MainTabContainer.ClientID %>”);

var tab = $find(“<%= MainTabContainer.ClientID %>”).get_activeTabIndex();

switch (tab)

{

case 0:

if (Page_ClientValidate(‘tabPersonal’) == false)

{

$find(“<%= MainTabContainer.ClientID %>”).set_activeTabIndex(0);

$find(“<%= tabPersonal.ClientID %>”).set_activeTabIndex(0);

}

else if (Page_ClientValidate(‘tabContact’) == false)

{

$find(“<%= MainTabContainer.ClientID %>”).set_activeTabIndex(1);

$find(“<%= tabContact.ClientID %>”).set_activeTabIndex(0);

}

break;

case 1:

if (Page_ClientValidate(‘tabPersonal’) == false)

{

$find(“<%= MainTabContainer.ClientID %>”).set_activeTabIndex(0);

}

else if (Page_ClientValidate(‘tabContact’) == false)

{

$find(“<%= MainTabContainer.ClientID %>”).set_activeTabIndex(1);

$find(“<%= tabContact.ClientID %>”).set_activeTabIndex(0);

}

}

}

In some cases, set_activeTabIndex(0) method doesn’t work so instead of that we can also use another method to active current tab that is invalid is:

tabContainer.set_activeTab(tabContainer.get_tabs()[TabIndex]);