Display a button when all required inputs are filled or enterted

Need help
1

How can I set a button to display only when all required inputs in a group are filled in/entered?

2

As good UX practice I don’t make the button invisible, but I do have it greyed out until the inputs are all filled in. But the setup is the same. I basically add a condition to the button with the condition Input Name is not empty and Input Address is not empty or Input Age is not empty (repeating this for all of your inputs) and it makes the button This element is not clickable "no" and Background color (regular color)

Then I make the button not clickable by default, and grey color by default so the entire condition has to be met for it to be clickable. If i flipped it around sometimes I noticed the button could be clicked for a fraction of a second while the page was loading

3

This looks like a much smarter solution than what I was ging to try.

I think the only difference is that it uses Input Name is valid.

But having some weird behaviour where its not working right now to debugging to make sure I haven’t done anything wrong

4

But it doesn’t have to be this hard. This is what “this input should not be empty” is for.

5

Oops forgot to mention in my case I was using auto-binding with a “I’m done, submit this” kind of form where edits are being done on the fly. Yes @jayyoms if you’re creating something from your submit button from scratch just do what @keith said :joy:

6

Good observation @tylerboodman!

7

I think Bubble considers invalid inputs as empty still