Input field validation

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

10 Likes