Show appropriate tab in case of validation error.

[AndrewEnovaPoint]

Hi

I have 4 tabs in my edit form.

For instance if i am on the Tab 1 and trying to save the form with validation error of field which is on the Tab 3.
How can i open the Tab 3 for user automatically in case of validation error when submitting the form from Tab 1 ?


Many Thanks
Andrew

[Nikita Kurguzov]

Hello, Andrew!
There is only one way it can be done - through client-side validation, and you'll need to write it for every required field on the Form.

Here is my example code:

Code: Select all

fd.onsubmit(function(){
	if(!fd.field("Title").value()){
		$('#fd_tabcontrol-0').tabs('option', 'active', 0);
	}
	
	if(!fd.field("Test").value()){
		$('#fd_tabcontrol-0').tabs('option', 'active', 1);
	}
	
	return true;
});

I have two required text fields - Title and Test, I also have them on two different tabs. If one of them is empty, the active tab will switch to the correct one when I try to save. I don't need to display an error message as the server validation will do it for me.

You can write similar code for your case. Few things to conside:

1) fd_tabcontrol-0 is an ID of the Tab Control, it's counted from zero. You will need to find the correct ID if you have more than one Tab Control on the Form.
2) tabs('option', 'active', 0) switches an active tab to a different one, but it is also counted from 0.
3) Different fields on your Form will likely need different methods to get their value, if you want to check if they are empty or not. Try to experiment with fields, you can add alert(fd.field("Field").value()); calls to the code to see what values are being returned by the fields that do not get checked normally. Finally, this documentation might be very helpful to you in the process - https://spform.com/javascript-framework ... eld-values

[AndrewEnovaPoint]

It will be a great journey. Especially validating user/people picker fields. Sometimes we get- Multiple entries matched, please click to resolve.
So with your method i would not be able to do that.

What about more universal method using JQuery to search for specific css classes on the page in case of error? Possible?

[Nikita Kurguzov]

Hello, Andrew!
You are actually right, it is possible to use JQuery. Try this code as an experiment, it should work with most errors, let us know the results:

Code: Select all

function checkTabsForErrors(){
	if($('span[role="alert"]').text()){
		var errorTab = $('span[role="alert"]').parents('.ui-tabs-panel')[0];
		var id = errorTab.id;
		var idAndTab = id.split('-tab-');
		$('#' + idAndTab[0]).tabs('option', 'active', idAndTab[1] - 1);
	}
}

checkTabsForErrors();

This wouldn't work for several levels of tabs though. If you have tab controls inside tab controls, use this code instead:

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]));
	}
}

[AndrewEnovaPoint]

Thank you.
I'll try this and let you know.
PS. we have only one TAB control.