Hi,
I have several forms with a submit button and I want to have conditions on these buttons so they get greyed as long as mandatory fields are not filled and valid.
Once the mandatory fields are filled & valid, the button becomes colorful.
What is the best method to do so? In order not to repeat bunch of conditions and get these gigantic ugly conditions as on this screenshot ?
Best
Can’t you just use “this input should not be empty”/“this checkbox should be checked” property on each field? As soon as your submit button uses these fields - WF will not start.
Thanks for the answer.
This would technicaly work, but that’s not very user friendly and not up to modern software standards.
Yep, not the best UX for users, but better value in terms additional work for developer 
I guess the easiest way is to use some JS that listens to inputs/checkboxes and changes the button style (color) and state (clickable or not).
To make it in native Bubble you can use custom state for each input/checkbox. For example, when input is changed and when it’s not empty - set state 1., when opposite - set state 0. In the conditionals calculate the sum of custom states. If it’s equal to the number of mandatory inputs/checkboxes - make the button clickable and change the style. So you’ll have less overloaded expression in the button’s conditionals, but you’ll have to deal with additional WFs and custom states.
Okay, now it’s time for some TIL session.
Button isn't clickable and change the style
P.S. All kudos go to David (not sure if he’s active on the forum), he shared this tip on twitter almost 2 years ago.
Use “custom states”.
create a value “isChanged” (default : no)
then chane this value to “yes” if some field changes the value (users input).
use a condition to handle the action (show alert, background gray…)
That looks nice, I’ll try to implement it ASAP
This topic was automatically closed after 70 days. New replies are no longer allowed.