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.

Members fund testing for the Drupal project. Drupal Association Learn more


nedjo’s picture

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.

nedjo’s picture

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.

baronmunchowsen’s picture

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.

baronmunchowsen’s picture

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()) {

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...!

baronmunchowsen’s picture

Status: Active » Needs review

I guess I need to change the status too.

mrfelton’s picture

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:

would be:

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.

nedjo’s picture

Status: Needs review » Fixed

Thanks, applied.

Status: Fixed » Closed (fixed)

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

SeanA’s picture

Version: 6.x-1.0 » 6.x-1.3
Category: feature » bug
Status: Closed (fixed) » Active
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()) {

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

adshill’s picture

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

clashar’s picture

confirm that patch #9 works for me with CCK Fieldgroup Tabs.

nedjo’s picture

Looks good. Haven't tested yet.

webfaqtory’s picture

Can confirm #9 works for me too :)
Was about to give up on this module as this was a real show-stopper

fuerst’s picture

Status: Needs review » Reviewed & tested by the community

#9 works for me. Thanks!

kasalla’s picture

#9 works for me too. Thanks!

jantoine’s picture

Version: 6.x-1.3 » 6.x-1.x-dev
872 bytes

Updated patch using GIT.