Subject should say it all…
Am I doing something wrong?
I have 3 groups all with input fields for the same form.
All input fields are marked “should not be empty”.
If the input is valid on Group #1, and invalid on HIDDEN Group #2 & #3, the Submit Button is successful.
Is there a way to fix this?
Why you dont set a button for each group instead of using the same? You can play with conditional visibility with each button and show them only with their group.
I believe when inputs are hidden, the requirement is ignored. What you can do is add a condition to the Submit button:
When hidden input’s value is empty > this element isn’t clickable
Gaby | Coaching Bubble
Private coaching, courses, and tons of free resources
Thanks for the suggestion - I would have to consider the UX impact, but this could work…
Great work around and solution - one bubble specific challenge… the conditional when field does not support as many input boxes as I need to check (i can only check 66%) with this solution, in real practice this should cover ~80% of the cases, however there’s always that last 20%…
Any ideas on the last 20%?
Thanks!
Using different buttons with conditionals should be transparent for user. I mean, that should not affect to UX impact.
Ok got it, thanks for clarifying yusaney1 - combining both suggestions - I believe this is the solution for 100% coverage.
When Group 1 is displayed
– Save button 1 is displayed, on click
— Checks when hidden (Group 2, Group 3) is not empty
— Checks Group 1 is valid
When Group 2 is displayed
– Save button 2 is displayed, on click
— Checks when hidden (Group 1, Group 3) is not empty
— Checks Group 2 is valid
When Group 3 is displayed
– Save button 3 is displayed, on click
— Checks when hidden (Group 1, Group 2) is not empty
— Checks Group 3 is valid
This topic was automatically closed after 70 days. New replies are no longer allowed.
