Input field validation

Hi guys,

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!


Arjuna Bosch


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

Gaby | Coaching Bubble


Hi Romanmg,

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”.

Thanks again!


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…

Hi Romanmg,

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.



1 Like

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”

1 Like

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.

Try removing the style from the dropdown or edit the boxshadow’s color in the style tab (you have a style on this element, so it’s using that color).

I can put a standard box shadow around it but then it’s always there, even before filling it in:

In the conditions tab at that page I have again the problem that I can’t choose if “This dropdowns value is valid”…

Sorry, ok, remove the boxshadow from the style and then through conditions (not in the style, but on the element) adjust the boxshadow color.

Sorry but I don’t see how. If I click on conditions in the element I can’t adjust the color:

I can only click on a style which ar pre defined and these ones are black.

I don’t have a style on this input (I know this is a regular input, but it’s the same for a dropdown):

So, could you try removing the style completely from your element or set the shadow style to none in the style settings.

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.

Thanks Gaby!

@romanmg, @emmanuel, thanks again for your help with this!

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.


Hi @sridharan.s,

I think I got something workable.

Basically I use the workaround of using a visible/invisible shape/button and trigger a workflow based on that.

You need

  1. Invisible shape/button with the following two conditions adapted to your needs.

  1. 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.

Hope this helps.



Great idea! Thanks for sharing. Very helpful!

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.