Trek Innovations

Normally when we are using Ajax TabContols in aspx page with validation controls enabled on each and every TabPanel. Suppose if iam having 3 tab panels in TabControl and every tabpanel has some validations enabled and if iam in 1^st panel and I submitted the form by clicking the button and in the 1^st panel every thing is ok i.e. I filled all my required fields on the 1^st TabPanel. But I left some fields blank on the 2^nd and 3^rd TabPanel; when you click on submit button the validations will be enabled on 2^nd and 3^rd panel but the tab index of the TabControl will be still on the 1^st TabPanel only. But we want TabIndex to automatically change based on the validation failed on the TabPanel. In order to do that we have to write a piece of JavaScript as show below:

<script type=”text/javascript”>

var handleTabChange = true;

function ValidatePage()

{

if(handleTabChange)

{

if (Page_ClientValidate(‘Tab1′) == false)

{

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

}

else if (Page_ClientValidate(‘Tab2′) == false)

{

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

}

else if (Page_ClientValidate(‘Tab3′) == false)

{

$find(“<%=TabContainerAddEnquiry.ClientID%>”).set_activeTabIndex(2);

}

}

else

{

handleTabChange = true;

}

}

</script>

From the above JavaScript you can see iam having if else statements and in that iam checking Page_ClientValidate() by passing the validation group of each and every tabpanel.

Iam having 3 tabpanels and evry tabpanel has got its own validation group set as you can see below highlighted with yellow Color. So basically you have to set separate validation group for each and every tabcontrol.

See source code here:

<EA:TabContainer ID=”TabContainerAddEnquiry” runat=”server” CssClass=”scienceEnquiry” OnClientActiveTabChanged=”SaveActiveTabIndex” ActiveTabIndex=”1″>

<EA:TabPanel ID=”tabContactDetails” runat=”server” HeaderText=”Contact Details” TabIndex=”1″>

<ContentTemplate>

<p>

<label for=”Textbox1″>

Text1:

</label>

<asp:TextBox ID=”Textbox1″ runat=”server” TextMode=”MultiLine” ValidationGroup=”Tab1″></asp:TextBox>

<asp:RequiredFieldValidator ID=”_ Textbox1ReqFieldVal” runat=”server” ControlToValidate=”Textbox1″ ValidationGroup=”Tab1″

SetFocusOnError=”True” Display=”None” ErrorMessage=”<b>Required Field Missing</b><br />Recieved Date is required.”></asp:RequiredFieldValidator>

<EA:ValidatorCalloutExtender ID=”_ Textbox1DescValExt” TargetControlID=”_Textbox Textbox1ReqFieldVal “

HighlightCssClass=”validatorCalloutHighlight” runat=”server” Enabled=”True”>

</EA:ValidatorCalloutExtender>

</p>

</ContentTemplate>

</EA:TabPanel>

<EA:TabPanel ID=”tabEnquiryDetails” runat=”server” HeaderText=”Enquiry Details” TabIndex=”2″>

<ContentTemplate>

<p>

<label for=”Textbox2″>

Text2:

</label>

<asp:TextBox ID=”Textbox2″ runat=”server” TextMode=”MultiLine” ValidationGroup=”Tab2″></asp:TextBox>

<asp:RequiredFieldValidator ID=”_ Textbox2ReqFieldVal” runat=”server” ControlToValidate=”Textbox2″ ValidationGroup=”Tab2″

SetFocusOnError=”True” Display=”None” ErrorMessage=”<b>Required Field Missing</b><br />Recieved Date is required.”></asp:RequiredFieldValidator>

<EA:ValidatorCalloutExtender ID=”_ Textbox1DescValExt” TargetControlID=”_ Textbox2ReqFieldVal “

HighlightCssClass=”validatorCalloutHighlight” runat=”server” Enabled=”True”>

</EA:ValidatorCalloutExtender>

</p>

</ContentTemplate>

</EA:TabPanel>

<EA:TabPanel ID=”tabAssignTo” runat=”server” HeaderText=”Assign To” TabIndex=”3″>

<ContentTemplate>

<p>

<label for=”Textbox3″>

Text3:

</label>

<asp:TextBox ID=”Textbox3″ runat=”server” TextMode=”MultiLine” ValidationGroup=”Tab3″></asp:TextBox>

<asp:RequiredFieldValidator ID=”_ Textbox3ReqFieldVal” runat=”server” ControlToValidate=”Textbox3″ ValidationGroup=”Tab3″

SetFocusOnError=”True” Display=”None” ErrorMessage=”<b>Required Field Missing</b><br />Recieved Date is required.”></asp:RequiredFieldValidator>

<EA:ValidatorCalloutExtender ID=”_ Textbox3DescValExt” TargetControlID=”_Textbox3ReqFieldVal “

HighlightCssClass=”validatorCalloutHighlight” runat=”server” Enabled=”True”>

</EA:ValidatorCalloutExtender>

</p>

</ContentTemplate>

</EA:TabPanel>

</EA:TabContainer>

And after setting the validation groups, I need to validate the data when in click on the submit button. So in order to validate the data in button click there is a property called OnClientClick for button control . Use this property to call the javascript like this =”javascript:ValidatePage();” and one more thing you need to do is set the validation groups for the button control as shown below:

<asp:Button ID=”_btnSubmit” runat=”server” Text=”Add Enquiry” CausesValidation=”true” ValidationGroup=”Tab1,Tab2,Tab3″ OnClick=”_btnSubmit_Click” OnClientClick=”javascript:ValidatePage();” />

This solves the problem. Happy Coding…………..

No comments