I’m struggling with probably quite a simple function in Bubble. I would like to get validation on input fields. So if a field is not filled in and someone presses button “Next step” I would like to have a red text below the input field saying: “Please fill in this field”. It doesn’t seam to work with using a text and make this conditional because I can’t link it to a click on the “Next step” button. Also the workflow doesn’t work. Does someone knows how to do this? Or maybe a working example? Thanks!
Turn on “This input should not be empty” for the input field. Since the Next workflow references that field, it’ll prevent the workflow from being run, and you can create a condition on the input to change what it looks like (say, a red bottom border), when “this input isn’t valid” - if you’re using a Bubble style, this condition is already added for you.
Another way is to create 2 workflows: one for when input isn’t empty and one for when it is empty.
“When Next is clicked and input’s value is empty” > show alert (this is another element you would create on the page)
“When Next is clicked and input’s value is not empty” > whatever actions you want for the user to proceed
Thanks! Regarding the first method: I would also like to create a box shadow and green color when the input “is valid”. However, I can only give “This dropdown is …”. In the “…” I can’t give “is valid”. I do this in the styling of the dropdown fields in “Conditional”.
Right, there isn’t a “is valid” option, but you if you have a “formula” for validity, you can use that to set the condition. For example, if I want my users to input an email that’s in my database, then “When input’s value is in Search for Users Email, change bottom border…” etc.
Does that make sense?
You can also change the appearance when the input is focused, though that doesn’t necessarily mean it’s valid…
Thanks, it does make sense but the “formula” method means a workflow right? In the workflow I can only link an action to for instance a click on a button and not on filling in a value in an input field. After all, I don’t see a workflow button on the right when I click on an input field.
You could use “when an input’s value is changed and when this input’s value is…” to create a workflow condition:
By formula I just meant you can determine a valid value by setting the workflow condition or element condition. Since you were wanting to change the style, I suggest instead of workflow, you actually add a condition on the element “When this input’s value is XYZ, change a border color”
Hmm I thought I had it! I tried it with the conditional options from the input field. I get this after adding the condition to show boxshadowstyle. Unfortunately, I can’t pick a color. It shows black and I would like to show green.
Hi @romanmg, I’m having trouble getting an Event Check-In page to confirm whether an email address is registered for a specific event or not, while also displaying error messages when 1) someone leaves the email field blank, 2) enters an invalid email, or 3) enters an email that’s not registered for the event.
Seems like this should be dead simple, but for some reason when I set-up workflows to trigger error messages, they don’t seem to be run, almost as if the submit button button is disabled (which it’s not). It seems like it has to do with whether the input field is used in a workflow, but I can’t quite figure out what Bubble’s doing or why.
Any idea how I can set this up so that it shows error messages when the input is blank, invalid, or not registered for the event?
Hey @sridharan.s, could you share a link? The issue could be caused by a number of things if you’re trying to get 3 different error messages to run, so probably easier if I see how you currently have it set up.
A blank email or invalid email should definitely be picked up if you’ve marked the input as “should not be empty”. An unregistered email should be done by searching your database for that email, but let me take a look at a link and I can let you know what I find.
Sure, happy to share a link privately. Could you send me your email via a private message so that I can add you as a collaborator?
The problem that I’m having is that when users type in an invalid email address, the notification won’t show. The input field turns red, but many users don’t see this so it’s important that we show a notification.
I’ve tried other variations of the workflows and managed to get this workflow working, but then others wouldn’t run (even though they had the exact same conditions). So, it seems like I’m running up against some of Bubble’s internal rules in a way that’s unclear to me.
Wanted to share our solution with the community. My understanding is that Bubble, by design, doesn’t run workflows when one of the inputs is invalid. As such, it’s not possible to trigger a workflow to display an error message for invalid field entries.
So, what I’ve done is add a light grey field to the right of the input saying “required.” When a user inputs a valid email I remove the word required and add a green checkmark. If the field is invalid and not focused, then I turn the “required” text red to indicate that it’s a problem.
Note - this solution mitigates the problem of either 1) telling user’s that it’s invalid while they’re still typing their email which can create a bit of a rude/irritating user experience and 2) it is much more obvious to users than simply changing the outline of the input to red, since many users don’t notice that, and 3) it helps user’s know why the submit button didn’t work because now there’s a word on the page that’s red that indicates where the problem is so users know to fix the email address input field.
Basically I use the workaround of using a visible/invisible shape/button and trigger a workflow based on that.
You need
Invisible shape/button with the following two conditions adapted to your needs.
Workflow “Do when condition is true”
You can define the actions to set state and then animate group or whatever you are planning. In my case I have those 3 actions to test if this could work.
Every time I press submit and something is not valid I can show a general message and a message so the user checks red boxes.
Ok. So I finished implementation following that approach for an error message.
I used a Floating Group with a Reusable element inside that contains my notice message(via State).
Here is the final result.
I will improve with some icons and possible some new states to modify the background of the notice to show warnings, success and information messages. Classic red, yellow, green and blue notice backgrounds.
Hi JonL, can you help me doing this, I have sucked after setting the conditions. I have no idea what to do in the workflow for doing the same as you have done.
