Question

I have a TabContainer with three pages of input fields. For each TabPanel there’s a set of ValidatorCalloutExtenders (one for every validator on the panel).

When I validate the page the validation only works as it should for the current panel. For all hidden TabPanels all the validator-tooltips are visible in a mess when that tab is selected.

I have put a button on the first and second tab pages that looks roughly like this:

<input type="button" class="next" value="Next" onclick="Page_ClientValidate('Contact'); if(Page_IsValid) { SelectTab(1); }" />

where selecttab looks like this:

function SelectTab(ix)
{
    var container = $find('<%=createUserTabs.ClientID%>');
    container.set_activeTabIndex(ix);
}

Pushing only the buttons, the tab pages actually work with the validation.
But when I click the tabs instead of buttons, hell brakes loose again.

First there are no way to prevent a tab switch.
Secondly if I add validation to OnClientActiveTabChanged=”tabChanged” all the validators are piled up in a mess on the validated tab, as it’s not displayed.

function tabChanged(sender, args) {
    tabIndex = sender.get_activeTabIndex();

    if (!Page_ClientValidate('Contacts')) {
        if (tabIndex != 0) {
            sender.set_activeTabIndex(0);
            Page_ClientValidate('Contacts'); //Doesn't fix the validator soup
        }

        return;
    }

Did anyone get ValidatorCalloutExtenders working with TabContainer?

Is it worth bothering with ajaxControlToolkit at all or should I rewrite to jQuery without blinking? (Serious question… This is a webforms project where a lot if ajaxControlToolkit is in use, but I’m feeling constrained and countered by it.)

Answer 1

Nevermind… I’m so thick.

var getouttahere = false;

function tabChanged(sender, args) {

    if (getouttahere) {
        return;
    }
    getouttahere = true;

    tabIndex = sender.get_activeTabIndex();

    do {

        sender.set_activeTabIndex(0);
        if (!Page_ClientValidate('Contact') || 0 == tabIndex) {
            break;
        }

        sender.set_activeTabIndex(1);
        if (!Page_ClientValidate('Delivery') || 1 == tabIndex) {
            break;
        }

        sender.set_activeTabIndex(2);
        if (!Page_ClientValidate('Invoicing')) {
            break;
        }

    } while (false);

    getouttahere = false;
}