Required fields when hidden

I have a form with multiple text and number entries that are required. (1,2,3,4,5…)

In order to visually separate them, I made a choice component (A,B,C) that shows only the selected few entry fields (1,2,3,4,5…) based on the choice selected (A,B,C) - by changing the visibility settings of each text entry.

But then when the first “tab” (A) is completed, you can submit the form, even though “tabs” B and C are not completed (even though they also have required fields).

Is there a way to change this? To be able to submit only when all the required entry fields are filled, even though they are not all visible?

I’ve seen the similar topic asking for the opposite of what I’m asking for (Hidden Required Entry Fields) but I’d also like the option for fields to be required even when not visible.

So, to have the option to choose if the field is required, or required even if not visible.

Or is there another way to visualy separate items (in different screens so to speak) not using the choice componeny that hides some of the items? (Doing that with buttons don’t really work in the form in my experience)

Thank you!

I have a hunch you need to stop using forms, which has the frustrating feature of not being able to control when it is submitted. Instead, do the following:

Replace your button that opened the form with a standard button. For the button’s action, create a custom action which will open a new screen.

On the new screen you can then add all the components you need for your regular form, playing with visibility arguments based on what the user has selected.

In order to simulate submitting the form you should add a final button at the bottom of the screen (or perhaps a floating button). This button should only become visible when criteria are met, e.g. the elements of the form you require are completed.

Next, create a custom action for this ‘submission’ button. The action will start by adding a row to the sheet you normally use to submit a form. This blank row can then be populated with a set columns action, e.g. you will push the values from the ‘form’ into the new row. The final step will be ‘go back’, which will simulate submitting the form… you can also a custom notification ‘Submitted!’ to confirm to the user.

Hope this helps…

2 Likes

If clients insist on a form I use CSS to control the submit button.

<pre><span><style>

[data-test="nav-button-Submit"] {
pointer-events: none;
opacity: 0.4;
}

Then I can conditionally control when to make this “visible”.

4 Likes

How would you use:



[data-test="nav-button-Submit"] {
pointer-events: none;
opacity: 0.4;
}

with conditional control to make visible?

You can put a visibility condition on the rich text component to hide or show it, which would make the CSS activate or deactivate.

1 Like

That works perfect.
Thank you!

2 Likes