Forum Academy Marketplace Showcase Pricing Features

Input field validation

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?

Thanks!

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.

9 Likes

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.

Regards,
Jon

4 Likes

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.

2 Likes

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.

Hi,

Where exactly are you stuck? I would need more details or access to app to check it out.
It’s quite simple once you understand the basics behind this work around.

I use the hidden/visible 1x1 button constantly when I need to fire an event from the frontend to the workflow system.

this is my app’s workflow. Actually, this is the very first thing which I am focusing to be done. I want the same red error message, which you have done above. I have also trying to create an event when the condition is true, which is in the purple color.

Please have a look on that and let me know if it is possible or not.

Thanks in advance.

Can’t access. It’s not public.

hi @romanmg how do i make the input is invalid if the user name/email is already in the database?

I was searching around on how to do this and appreciated what others had posted. I like the button approach but hidden elements do worry me a bit from a maintenance perspective so I thought I’d try to take an approach that is directly on the elements themselves.

Essentially you add Conditionals on messages within groups associated with the fields that need to be checked. I put the messages in a Group since groups can have heights collapsed when hidden so that they’ll appear only when an error occurs. Make sure the groups are not visible on page load.

Here are some screenshots of the approach.

I think it’s also important to make sure that the message doesn’t show if the value is empty since it’s annoying to see an error when you’re in the process of correcting the problem or decide to not fill out a non-required field after all.

The password field is a bit trickier because it can be “validated while typing” and the error can appear before the person has had a chance to complete the password. This is why it’s important to use “isn’t focused” in this situation as well.

To keep things neat, you might want to enclose both the error group and the input in a group of their own as well so the spacing between form elements can easily be distributed.

You could also display multiple errors on submit but I think it’s nicer to let people know something is wrong right after they enter info as opposed to waiting until the end to let them know something needs correction.

I hope that helps some bubblers.

It’s also a good idea to add html form labels that can be hidden from screen readers but that’s something I’ve addressed in another thread on accessibility. Bubble Websites and Accessibility