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:

// 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 < Page_Validators.length; i++) {
   // Perform the validation.
   ValidatorValidate(Page_Validators&#91;i&#93;);

   // If invalid data is found...
   if (!Page_Validators&#91;i&#93;.isvalid) {

    // Get the control that failed validation.
    var badControl = document.getElementById(Page_Validators&#91;i&#93;.controltovalidate);

    // Focus it.
    focusInvalid(badControl);

    // Stop processing validation.
    return;

   }
  } // Next validator.

  // The page is valid.

 }

 function focusInvalid(badControl) {

  // Get the index of the tab that contains this control.
  var tabIndexToFocus = getContainingTabIndex(badControl);
  if (tabIndexToFocus > -1) {
   // Switch to the tab that contains the validation error.
   var ultraTab = igtab_getTabById('<%=UltraWebTab1.ClientID %>');
   ultraTab.setSelectedIndex(tabIndexToFocus);

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

 function getContainingTabIndex(targetControl) {

  var ultraTab = igtab_getTabById('<%=UltraWebTab1.ClientID %>');

  // 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&#91;tabIndex&#93;.elemDiv == testControl) {
     return tabIndex;
    }
   } // Next index.

  } // Wend.

  // The control is not contained in a tab panel.
  return -1;
 }        
&#91;/sourcecode&#93;

To run the script, attatch it to the OnClientClick event of the button that submits the form:

&#91;sourcecode language='html'&#93;<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnEdit_Click" OnClientClick="preValidate();" />

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!

Advertisements

2 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

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: