If you have a 2 step form and fail to fill out required fields on both steps, you'll be taken to step 2 and will be shown error messages from all missing / invalid fields. This is because multipage.js iterates over all panes that contain errors and ultimately focuses on whatever the last error-containing pane was.

Here's the code that does this:

/**
 * Implements Drupal.FieldGroup.processHook().
 */
Drupal.FieldGroup.Effects.processMultipage = {
  execute: function (context, settings, type) {
    if (type == 'form') {
      // Add required fields mark to any element containing required fields
      $('div.multipage-pane').each(function(i){
        if ($('.error', $(this)).length) {
          Drupal.FieldGroup.setGroupWithfocus($(this));
          $(this).data('multipageControl').focus(); // <-- this always focuses on the last error pane, regardless of earlier error panes
        }
      });
    }
  }
}

The expected behavior is that the user will be taken to the first error-containing pane and then be allowed to press "next" in the process until they get through the form. Setting a variable for the first error-containing pane solves this:

      var $firstErrorItem = false;
      $('div.multipage-pane').each(function(i){
        if ($('.error', $(this)).length) {
          if (!$firstErrorItem) {
            $firstErrorItem = $(this).data('multipageControl');
          }
          Drupal.FieldGroup.setGroupWithfocus($(this));
          $(this).data('multipageControl').focus();
        }
      });
      if ($firstErrorItem) {
        $firstErrorItem.focus();
      }

Does this make sense? Anyone agree or disagree? I can provide this as a patch if it's welcome.

Comments

arnoldbird’s picture

Status: Active » Closed (duplicate)

Marking as duplicate of http://drupal.org/node/1676972

arnoldbird’s picture

Issue summary: View changes

Removed HTML in JS examples.