UltraWebTab: Switch to Tab on Validation Error

The Problem

I have an ASP.Net form that contains a set of tabs hosted inside an Infragistics UltraWebTab control. Each tab contains a number of fields that have validation. Sometimes, when the user submits the form, a validation error occurs. When this happens, I want the user to be able to correct the error with a minimum of fuss – I want the tab containing the error to be automatically selected, and the control with the error to be given the focus.

The Solution

The following code causes the first tab that contains an error to be selected when the form submits:

[sourcecode language='javascript']
// These scripts are responsible for handling validation
// error messages in the tabs. If there are any errors
// on the page, they switch to the tab containing the first
// error and ensure that the control with the error is focused.

function preValidate() {
  // For each of the validators on the page...
  var i;
  for (i = 0; i  -1) {
    // Switch to the tab that contains the validation error.
    var ultraTab = igtab_getTabById('');
    ultraTab.setSelectedIndex(tabIndexToFocus);

    // Focus the control and exit.
    badControl.focus();
  }
}

function getContainingTabIndex(targetControl) {

  var ultraTab = igtab_getTabById('');

  // Get a reference to the tabs.
  var tabs = ultraTab.Tabs;

  // Start with the control that failed to validate.
  var testControl = targetControl;

  // While we have not got to the top of the control heirarchy...
  while (targetControl != null) {

    // Walk up the DOM to seek out the tab panel that contains
    // the target control.
    testControl = testControl.parentNode;

    // For each of the tab panels...
    var tabIndex;
    for (tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
      if (tabs[tabIndex].elemDiv == testControl) {
        return tabIndex;
      }
    } // Next index.

  } // Wend.

  // The control is not contained in a tab panel.
  return -1;

}
[/sourcecode]

To run the script, attach it to the OnClientClick event of the button that submits the form.

Note that validation of each control will happen twice if the form is valid; once for the code above and then once because that's how ASP.Net works. This doesn't normally matter with the standard ASP.Net controls, but it might be an issue with badly-written custom validation controls. You have been warned!

Be Sociable, Share!
This entry was posted in ASP.Net and tagged , . Bookmark the permalink.

0 Responses to UltraWebTab: Switch to Tab on Validation Error

  1. Yosi says:

    Any idea how this could be done in winforms ?

  2. syukur says:

    How to validate for some required validator for difference group validator.

Leave a Reply

Your email address will not be published. Required fields are marked *