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
Comment #1
arnoldbird CreditAttribution: arnoldbird commentedMarking as duplicate of http://drupal.org/node/1676972
Comment #1.0
arnoldbird CreditAttribution: arnoldbird commentedRemoved HTML in JS examples.