Error handling with multiple forms in multiple tabs [#362973]

Hi there,

I have created a module which creates a 'tabbed block' using the tabs module. It is awesome (the module, not the block!). The tabbed block contains 2 tabs, each of which contain a simple form.

My problem is:
When I select the second tab, and submit the form within that tab - if I make a mistake in that form (e.g. miss a required field), I get an error message: 'field xxx is required', which is expected but the tabbed block defaults to the first tab. The field which is at error is contained in the form within the second tab, which is not visible.

My question:
I realize that this is not a 'bug' of the tabs module, but is there a way within the tabs module that I can specify which tab should be shown - particularly in regard to validating and processing form data held within that tab.

I hope that my description makes sense, and I am very appreciative of any assistance or advice you may be able to impart. I totally understand if this is outside the realm of the module.

Many thanks for this module.

Comment	File	Size	Author
#16	tabs_form_errors-362973-16.patch	872 bytes	jantoine
#9	form-errors.patch	884 bytes	SeanA
#4	tabs_formErrorJS.patch	538 bytes	baronmunchowsen

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

nedjo

he/him/his

English

CreditAttribution: nedjo commented 23 January 2009 at 04:03

Someone, I think it was Moonshine, added this functionality to CCK Fieldgroup Tabs module. Maybe - probably - it would be better as part of tabs module instead. See the file cck_fieldgroup_tabs_error.js included with CCK Fieldgroup Tabs module. I'd be happy to look at a patch for moving this to tabs module.

Comment #2

nedjo

he/him/his

English

CreditAttribution: nedjo commented 23 January 2009 at 04:05

Category:

support

» feature

Well, I guess usually we know that there is an error on the server side. A better approach might be to detect this when processing the tabset and set a class that flags the active tab.

Comment #3

baronmunchowsen CreditAttribution: baronmunchowsen commented 23 January 2009 at 05:46

Great - thanks for your quick reply. I'll get to some digging around and look at the cck_fieldgroup_tabs_error.js and see if I can make any sense of it (likely not, but you don't know until you try!). Cheers.

Comment #4

baronmunchowsen CreditAttribution: baronmunchowsen commented 28 January 2009 at 07:44

File	Size
tabs_formErrorJS.patch	538 bytes

Hi there.

I have played around with the script from the cck_fieldgroup_tabs_error.js file of the cck fieldgroup tabs module, and found that if I put the code at the top of the tabs.js file in the tabs module I get the desired result (tabset defaults to display the tab content containing the form error) :

Drupal.behaviors.tabsErrors = function (context) {
  $('.drupal-tabs ul').children('li').each( function() {
    if ($($(this).find('a').attr('href')).find('div.form-item .error').size()) {
      $(this).addClass('error').addClass('active');
    }
  })
};

Not sure whether this is the right way to do this or not, hence my posting as a code snippet as well as a patch (it might save you some time). This is the first time I've ever created a patch so apologies if it doesn't work or is rubbish :) . It doesn't really look the same as the other patch files kicking around...!

Comment #5

baronmunchowsen CreditAttribution: baronmunchowsen commented 28 January 2009 at 07:45

Status:

Active

» Needs review

I guess I need to change the status too.

Comment #6

mrfelton CreditAttribution: mrfelton commented 3 April 2009 at 13:16

works for me.

EDIT: Spoke too soon. If you have a form with several tabs, and a few of them have errors, it doesn't work as expected.

I think better than:
$(this).addClass('error').addClass('active');

would be:
$(this).addClass('error').filter(':first').addClass('active');

since you can't have more than one active tab. But I think the real problem is that setting the 'active' class isn't enough. I think you actually need to call switchTab() - but I can't work out how to get a handle on the tabs object to do this.

Comment #7

nedjo

he/him/his

English

CreditAttribution: nedjo commented 19 August 2009 at 15:23

Status:

Needs review

» Fixed

Thanks, applied.

Comment #8

2 September 2009 at 15:30

Status:

Fixed

» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Comment #9

SeanA CreditAttribution: SeanA commented 6 July 2010 at 16:54

Version:	6.x-1.0	» 6.x-1.3
Category:	feature	» bug
Status:	Closed (fixed)	» Active

File	Size
form-errors.patch	884 bytes

The fix doesn't seem to work properly. I'm using CCK Fieldgroup Tabs btw. Why do we add the 'error' class to the entire tab? (see #765750: CCK Fieldgroup Tabs's <div> are hightlighted in red when there is a validation error in the form.) I'm using something similar to #4 and it seems to be working. It's sort of a hybrid of #4 and the current code in tabs.js.

Drupal.behaviors.tabsErrors = function (context) {
  // Set the active class to the first tab with a form error.
  $('.drupal-tabs ul').children('li').each( function() {
    if ($($(this).find('a').attr('href')).find('div.form-item .error:first').size()) {
      $(this).addClass('ui-tabs-selected');
    }
  })
};

Possibly related issue: #657440: Add error class causes problems!?

Comment #10

adshill CreditAttribution: adshill commented 31 August 2010 at 17:41

Status:

Active

» Needs review

I can confirm this works with tabs and fieldgroup tabs - it hasn't had complete extensive testing but enough to say its a massive improvement. Infact it also solves a bug I had in that conditional fields were not working properly!! Which is nice :)

Anyway this will get extensive testing on our site over the next days but for now I can vouch!

Thanks a lot! Adam