Forms with required fields

I have a form with several input fields marked as required, and a button that performs a workflow to create a thing. I get nice validation for free, in that the workflow doesn’t execute if inputs are empty, the missing inputs are highlighted and focused when the button is clicked, and the button is disabled until everything is entered.

Is there a way I can get this functionality on a button without actually having the create a thing step in its workflow? I’d like to just be able to show a view mode with the button, before actually confirming and creating the thing.

If I add steps in the workflow to create a thing, then to immediately delete the thing I’ve just created, I get the required input validation working, presumably because each of the required inputs have been referenced. Obvioulsy I don’t want to do it like this!

1 Like

This is what all the conditionals are about. You can put some conditionals to the button that says making it clickable when some text field values are valid or not. If your validation logic is complicated (more than just empty check), you can still do it as a conditional but you have to figure out how to validate easily.

Bubble already provides some validation for emails, numbers etc I guess when you set the type of the input. But if that’s not enough, you can implement some validity using custom states for any input.

Ok. I was hoping I would be able to get the behaviour for free, just by marking the input as required, without having to create conditionals. There’s a lot of inputs, so my conditional would rapidly become very unwieldy.

I think if the button workflow uses these inputs in its actions in someway, then, marking the input element as it cant be empty stops the workflow.

I use this in my login and sign up forms without validating emptiness or emails.

Yes, that works, but I don’t actually want to do anything with the inputs for the confirm and view button workflow, I just want the validation to work. Hence my “hack”, getting it to work by creating a thing then deleting a thing.

Yea some things can be a headache in Bubble. Maybe other more experienced people can chime in.

Create a custom state called “GoodToGo = NO” and create a condition in your button to make it clickable only when GoodToGo = YES.

If you have a very complex form you can create a custom workflow with several steps to identify if the form was filled correctly. If yes, then you change the value of GoodToGo do YES.

Doing this you can grow your validation workflow as your form is getting larger and more complex and it is also very easy to debug.

You can run this workflow every time a input changes or any time you want.