Tab Color and Required Fields

[Sonoma]

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.

[Dmitry Kozlov]

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]

Works great. Thank you.

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

[curiousMolly]

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?

[AlexZver]

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]

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