Check Acordions For Errors

[vegard.grutle]

Hi!

Reference is made to this post:
viewtopic.php?f=1&t=1215

In my case i have multiple fields which are mandatory inside different accordion elements.

The user will experience that "nothing is happening" when trying to save a form if a field is not populated and the according element is collapsed.

Is there a way to achieve the same with according elements as for tabs?

Code: Select all

function checkTabsForErrors(){
	if($('span[role="alert"]').text()){
		var error = $('span[role="alert"]').first();
		openTabs(error);
	}
}

checkTabsForErrors();

function openTabs(element){
	var correctTab = element.parents('.ui-tabs-panel')[0];
	
	var tabId = correctTab.id;
	var IdAndTab = tabId.split('-tab-');
	var ID = IdAndTab[0].split('-')[1];
	
	$('#' + IdAndTab[0]).tabs('option', 'active', IdAndTab[1] - 1);
	
	if (ID > 0){
		openTabs($('#' + IdAndTab[0]));
	}
}

Thanks,

Vegard

[Nikita Kurguzov]

Hello, Vegard!
I am assuming you mean this topic instead?
You can try this code to display all Accordion tabs with errors at once:

Code: Select all

function checkTabsForErrors(){
	if($('span[role="alert"]').text()){
		var accordionTabs = $('span[role="alert"]').parents('.ui-accordion-content');
		for (var i = 0; i < accordionTabs.length; i++) {
			accordionTabs[i].style.display = 'block';
		}
	}
}

checkTabsForErrors();

Alternatively, you can try this code to only display one at a time:

Code: Select all

function checkTabsForErrors(){
	if($('span[role="alert"]').text()){
		var accordionTabs = $('span[role="alert"]').parents('.ui-accordion-content');
		for (var i = 0; i < accordionTabs.length; i++) {
			accordionTabs[i].style.display = 'none';
		}
		accordionTabs[accordionTabs.length - 1].style.display = 'block';
	}
}

checkTabsForErrors();

This code won't work properly if you have accordions inside other accordions though, or tabs inside accordions, etc. This is just for one accordion. If your situation is more specific, let me know and I'll rewrite it for you.

[vegard.grutle]

Hi,

Thanks for Quick responce.

Im not a programmer so, could you please tell me if there are places in the script that needs to be modified in ordert to be responsive? Copy paste the script did not work.

Cheers!

Vegard

[Nikita Kurguzov]

Hello, Vegard!
What do you mean by "responsive"? Does it not work at all or does it not select the right tab?

Previous code might not have worked perfectly, but it should've at least displayed the tab with the error. But I can recommend using this code, it will just click on the correct tab instead:

Code: Select all

function enableTab($tab){
	var headerId = $tab.getAttribute('aria-labelledby');
	var $header = $('#' + headerId);
	$header.click();
}

function checkTabsForErrors(){
	if($('span[role="alert"]').text()){
		var accordionTabs = $('span[role="alert"]').parents('.ui-accordion-content');
		enableTab(accordionTabs[accordionTabs.length - 1]);
	}
}

checkTabsForErrors();

You don't need to do anything with it. Simply add it to JavaScript editor on your Form and it should click on the first Accordion tab with error if there are any.

[vegard.grutle]

Sorry! No luck. I have som additional custom code on the forms which is hiding/showing the accordion tabs based on a selection on the form.

Maybe there is a conflict here.


Vegard

[Nikita Kurguzov]

Hello, Vegard!
Try to comment out your code for now and see if it will work without it or not. If it won't, check out the console and see if there are any errors there or not.