Ajax TabContainer Validation Solution

If you have ever tried to validate controls on a ajax TabContainer when you change tabs you will have run into a couple of issues.

The first of those is that you cant set the validation group etc for the TabContainer or panels. You don’t want to do serverside validation so you think of using the OnClientActiveTabChanged event somehow to fire the validation events.
You soon find out that using the OnClientActiveTabChanged event is not that simple. You need a javascript function for it, inline is not allowed. If you have UpdatePanels and/or you are on a user control you will have some fun getting the javascript function to be registered.

You naturally leave your server side OnActiveTabChanged event as is thinking that if you get the validation events to fire that the server side call will be stopped. Think again, because the TabContainer uses AutoPostback = “true” the server side event is fired anyway and validator error text disappears after the postback is complete. If you remove AutoPostback then you cant get the server side OnActiveTabChanged event to fire…and there is more fun to be had there.

Here is a simple alternative. Remove the AutoPostback and dont use the OnActiveTabChanged event. In your HeaderTemplate place a LinkButton and add the validation group you want to use to that. Then link the OnClick of the LinkButton to fire serverside when you need it. The validation fires correctly but you still have to stop the tabs from changing on validation error manually. To Do that you hook into the OnClientActiveTabChanged event and just check if validation was successful or not before moving to the selected tab.

Here is the client script, if you need the rest of the code let me know. I am still battleing to get html code into this blog.

    var currentTabIndex = 0;

                var nextTabIndex = sender.get_activeTabIndex();

                if (Page_ClientValidate("My Validation Group")) {
                    // Save the current tab index so we can reference it next time.
                    currentTabIndex = nextTabIndex;
                else {
                    // Setting the activeTab below will trigger this function again
                    // So, to make sure we don't get caught in a loop, make sure these values aren't the same                
                    if (nextTabIndex != currentTabIndex) sender.set_activeTab(sender.get_tabs()[currentTabIndex]);

The script was hacked form

Ps: Thanx to Jaco for coming up with the linkbutton idea.


Tags: , , , ,

6 Responses to “Ajax TabContainer Validation Solution”

  1. Ray Chin Says:

    How do you find the documentation for the exposed javascript methods? like get_tabs() and get_activeTabIndex()

  2. zaries Says:

    I picked up what I needed from articles on the net but you might find some official documentation here http://www.asp.net/Ajax/documentation/

  3. Raj Says:

    Thanx for ur information.I got struck with the same problem…

    Got idea where exactly i am going wrong…


  4. Raj Says:

    hey i ogt solution for problem in most simple way..i try to upload that page soon..there is no need for us use all those javascirpt functionss..best solution is put all ur aspx code in update panel and refresh it..all time…

    i will upload it soon..

  5. Mahesh Says:

    Hi Raj,

    I try to implement the above solution using the link button and the java script by Zaries. it worked great. But the java script on OnClientActiveTabChanged does not work as expected. Could you please post your aspx code as you mentioned or directly email me.

    My requirement is as described below. there are two tabs, in each tab there are server validation controls and if user tries to navigate from one tab to another and if there are errors in the existing tab, the current tab needs to be focused and show the validation errors, otherwise navigate to other tab that user clicked.

  6. zaries Says:

    Sorry it has been years since I did this, or worked on dotnet stuff at all so I don’t have the code lying around any more. To be honest I don’t even have a windows machine where I could try to replicate this any more.

    Hope you come right.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: