I want to find information on how to create a popup if all 4 different pieces of data have not been included with form when user hits submit button.
I can’t find anything and believe its because I’m not using correct Bubble terminology.
Guidance much appreciated!
Hi, @Dog-Tag. It sounds like you want to do some basic validation. Perhaps searching the forum for “validation” and “conditional” might turn up some results.
“Conditionals” are one of the main ways to implement logic to control the UX. They’re in a separate tab in the Properties editor.
EDIT: To expound a bit… You could, for instance, use conditionals to disable a form’s submit button until all of the fields had a value. Validation can, of course, be much more sophisticated, but getting familiar with conditionals is a good first step.
In addition to what @sudsy says (quite correctly)… Input validation is built in to Bubble in a pretty clever way. Here’s an example:
You will note that all inputs have a “this input should not be empty” field. IF you then have an action that does something with the value of that input, Bubble understands this and will handle all the (not hard to do yourself, but ya know) validation or you. Here’s one now:
All my other inputs are set up the same way (they must not be empty):
And now, I hook up my button to use those fields:
Here’s the workflow:
See how this workflow depends on all dem inputs?
Well, now, the button automagically knows not to be clickable until all the inputs are valid!
Look (runtime mode):
It’s red… means no clicky. (I separately changed the text of the button via a condition.)
Now, if I fill out only part of the SEXY FORM, I get:
I tried to click the submit button… and I only have 2 field filled in… Magically, the third input highlights, telling me to fill the damn input in:
Now, if I fill that in:
Now I can submit.
So, all of the above is something that you’re supposed to notice in your first few hours of using Bubble. I guess people just don’t play around with Bubble enough because I distinctly remember seeing this and being, like, “Oh, that’s so sexy.”
And because people like sexy examples… Here’s the runtime:
And here’s the sexy editor: