Tab Color and Required Fields
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.
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
- Site Admin
- Posts: 1524
- Joined: Thu Jun 07, 2012
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:
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;
});
-
- Posts: 2
- Joined: Tue Dec 11, 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?
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:
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);
-
- Posts: 2
- Joined: Tue Dec 11, 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
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
-
- Information
-
Who is online
Users browsing this forum: No registered users and 15 guests