Thursday, September 24, 2009

Set active tab on failed validation with ajax tabcontainer

Ajax Tab Container is one of the coolest control in ASP.NET but it has one problem when you're using mulitple validation controls on different tabs and on click of your submit button you need to set focus on the tab on which validation failed. Following javascript is useful to achive this:

function RunValidationsAndSetActiveTab()
{
if (typeof (Page_Validators) == "undefined") return;
try
{
var noOfValidators = Page_Validators.length;
for (var validatorIndex = 0; validatorIndex < noOfValidators; validatorIndex++)
{
var validator = Page_Validators[validatorIndex];
if(validator.validationGroup == 'CategoryGroup')
{
ValidatorValidate(validator);
if (!validator.isvalid)
{
var tabPanel = validator.parentNode.control;
if(typeof (tabPanel) != "undefined")
{
var tabContainer = tabPanel.get_owner();
tabContainer.set_activeTabIndex(tabPanel.get_tabIndex());
break;
}
}
}
}
}
catch (Error)
{
}
}


Please notice that we're using parentNode instead of parentElment because firefox doesn't recognize parentElement.

In the button that is used to submit all the tabs at once where each tab has set of validations you can call the above method on click of button on client side such as:

OnClientClick="RunValidationsAndSetActiveTab()"

Happy Programming!!!