Tab Color and Required Fields

Discussions about Forms Designer for SharePoint 2013 / 2016 and Office 365.
Locked
Sonoma
Posts: 88
Joined: Wed Oct 15, 2014

16 Oct 2014

We have some users that usually forget to fill in a field or two or more. We are using tabs. Everything works good but for somereason when they forget a field they do not know what they missed.

I have played around with the tabs some with colors and next/prev, ect.

Is it possible to if someone misses a required field to have the tab the field is locate on turn red?



Thank you.

User avatar
Dmitry Kozlov
Site Admin
Posts: 1524
Joined: Thu Jun 07, 2012

20 Oct 2014

Hi,

I'd recommend to add custom validation to your form with help of Forms Designer's JS-framework and check whether all the required fields are filled-in. Here is a sample:

Code: Select all

fd.onsubmit(function() {
	if (!fd.field('Field1').value()) {
		// activating a second tab:
		$('#fd_tabcontrol-0').tabs('option', 'active', 1);
		
		alert('Please, fill-in the Field 1');
		return false;
	}

	return true;
});

Sonoma
Posts: 88
Joined: Wed Oct 15, 2014

20 Oct 2014

Works great. Thank you.

Seeing how this works there really is not a reason to change the color tab.

curiousMolly
Posts: 2
Joined: Tue Dec 11, 2018

11 Dec 2018

From the work around above, what would it be for another fields required in the third tab? I am using 3 tabs, and make a field in the second tab and third tab to be required. The solution above only works with 2 tabs, once user completes the required field in the second tab and click submit, there is no pop-up alert for the missing required field in the third tab. The user still cannot submit the form because they do not see the error message in the third tab!! How do you work around with only one piece of JavaScript in the form?

User avatar
AlexZver
Posts: 232
Joined: Mon Aug 27, 2018

12 Dec 2018

Hi!

The code above implements a custom validation for "Field1", another required fields will be validated by default and won't be affected by this code.

The issue is that a default validation message can't be seen on an inactive tab.

Note that a zero-based index is used, so a code for the third tab activation will be like this:

Code: Select all

$('#fd_tabcontrol-0').tabs('option', 'active', 2);

curiousMolly
Posts: 2
Joined: Tue Dec 11, 2018

12 Dec 2018

Hi Alex,

Thank you for your reply! I inserted the third tab activation like this:

fd.onsubmit(function() {
if (!fd.field('field1').value()){
// activating a second tab:
$('#fd_tabcontrol-0').tabs('option', 'active', 1);
// activating a third tab:
$('#fd_tabcontrol-0').tabs('option', 'active', 2);
alert('Please, fill-in the required field');
return false;
}

return true;
});

This makes the behavior of the active tab bypassing index tab 1 and jump right into index tab 2. What/where should it be specifically?

~curiousMolly

Locked
  • Information
  • Who is online

    Users browsing this forum: No registered users and 12 guests