Change Ajax TabContainer focus to correct TabPanel on Validation fail

Change Ajax TabContainer focus to correct TabPanel on Validation fail

If you have controls to validate in different TabPanels in the Ajax TabContainer, you will notice that the TabPanel doesn’t receive focus when they contain a control that didn’t validate.
This little script will give focus to the correct TabPanel upon Validation-fail.
1. Include script in head-tag
2. Add this to the aspx-markup in a script-tag: var tabContainers = [‘<%= tabContainer.ClientID %>’];
3. Add this to the button that validates: .OnClientClick = “checkValidation()”;

var showConsoleLog = 0;
var jQueryIsSet = false;

// Include jQuery if not already included
if (jQueryIsSet != true && (typeof jQuery == ‘undefined’)) {
var headTag = document.getElementsByTagName(“head”)[0];
var jqTag = document.createElement(‘script’);
jqTag.type = ‘text/javascript’;
jqTag.src = ‘/scripts/jquery-2.0.3.min.js’;
headTag.appendChild(jqTag);
jQueryIsSet = true;
if (showConsoleLog == 1) console.log(‘added jQuery 2.0.3’);
}

function checkValidation() {
if (showConsoleLog == 1) console.log(‘checking validaton’);
if (typeof (Page_ClientValidate) == ‘function’) {
Page_ClientValidate();
}

if (!Page_IsValid) {
if (showConsoleLog == 1) console.log(‘Page not valid’);

var firstFailedControlID;
for (var i = 0; i < Page_Validators.length; i++) {
if (!Page_Validators[i].isvalid) {
firstFailedControlID = Page_Validators[i].controltovalidate;
break;
}
}

if (typeof firstFailedControlID == ‘undefined’) {
console.log(‘ERROR: Failed control not found’);
return;
}
else
if (showConsoleLog == 1)
console.log(‘Failed control: ‘ + firstFailedControlID);

if (showConsoleLog == 1) console.log(‘Got tabContainers:’ + tabContainers.length);

loop1:
for (var t = 0; t < tabContainers.length; t++) {
if (showConsoleLog == 1) console.log(‘checking tabContainer:’ + tabContainers[t]);
// get tabContainer
var tabContainer = $find(tabContainers[t]);

// get all of the tabs from the container
var tabs = tabContainer.get_tabs();

// loop through each of the tabs
loop2:
for (var i = 0; i < tabs.length; i++) {
var tab = tabs[i];
if (showConsoleLog == 1) console.log(‘checking tabPanel:’ + tab.get_id());
var el = $(‘#’ + tab.get_id());
var hasNonValidElement = el.has(‘#’ + firstFailedControlID).length;

// if nonvalid element found, set focus and break mainloop or continue if multiple (nested) tabcontainers
if (hasNonValidElement > 0) {
tabContainer.set_activeTab(tab);
if (showConsoleLog == 1) console.log(‘set activeTab: ‘ + tab.get_id());

if (tabContainers.length == 1)
break loop1;
else
break loop2;
}
}
}
}
}

Share this post