When submitting a form which contains vertical tabs (such as adding node content), several of which have required fields, the last tab with an error state is given focus.

The first tab with an error state should be given focus.

Comments

fauv created an issue. See original summary.

ominimo’s picture

This is the fist issue I have created. I hope I am doing this correctly. :)

Having looked at the js that gives focus i have a suggested fix:

- in field_group.js change the following code

/**
 * Implements Drupal.FieldGroup.processHook().
 */
Drupal.FieldGroup.Effects.processTabs = {
  execute: function (context, settings, type) {
    if (type == 'form') {
      // Add required fields mark to any fieldsets containing required fields
      $('fieldset.vertical-tabs-pane', context).once('fieldgroup-effects', function(i) {
        if ($(this).is('.required-fields') && $(this).find('.form-required').length > 0) {
          $(this).data('verticalTab').link.find('strong:first').after($('.form-required').eq(0).clone()).after(' ');
        }
        if ($('.error', $(this)).length) {
          $(this).data('verticalTab').link.parent().addClass('error');
          Drupal.FieldGroup.setGroupWithfocus($(this));
          $(this).data('verticalTab').focus();
        }
      });
    }
  }
}

to this

/**
 * Implements Drupal.FieldGroup.processHook().
 */
Drupal.FieldGroup.Effects.processTabs = {
  execute: function (context, settings, type) {
    if (type == 'form') {
      // Add required fields mark to any fieldsets containing required fields
      var errorFocusSet = false;
      $('fieldset.vertical-tabs-pane', context).once('fieldgroup-effects', function(i) {
        if ($(this).is('.required-fields') && $(this).find('.form-required').length > 0) {
          $(this).data('verticalTab').link.find('strong:first').after($('.form-required').eq(0).clone()).after(' ');
        }
        if ($('.error', $(this)).length) {
          $(this).data('verticalTab').link.parent().addClass('error');
          if (!errorFocusSet) {
            Drupal.FieldGroup.setGroupWithfocus($(this));
            $(this).data('verticalTab').focus();
            errorFocusSet = true;
          }
        }
      });
    }
  }
}

I have yet to learn how to make git patches so if someone thinks this is a worthwhile change (or has something better) maybe they could create a patch?

ominimo’s picture

Title: Vertical Tabs required fields focuses the last tab with error » Vertical Tabs required fields focuses wrong tab on validation
ominimo’s picture

I have just looked at dev 7.x-1.x-dev and noticed this has been fixed in exactly the way I have outlined above. I'll leave this here in case anyone needs a fix for 7.x-1.4

Please mark as fixed.

m42’s picture

Status: Active » Closed (works as designed)