Bubble.io Tutorial - Create Username (uniqueness, upper/lower case, no special characters)

In this video I show you how to create unique usernames in Bubble. It is important that the usernames cannot be used more than once and that we also validate special characters and the like.

Here is the regex pattern:  

([A-Za-z0-9_]+)

Source: https://forum.bubble.io/t/ensuring-case-sensitive-unique-usernames-with-only-specific-characters/46541/4 by mebeingken.

Video transcript:

Hello, my name is Chris Strobl and today I will show you how we can easily create unique user names in the Bubble. We have two dimensions here: firstly, that the user name can only have certain characters and secondly, that the user name is not already in use. Let's get started straight away.

We install a plugin called Instant Text. This helps to validate the text immediately and not wait for it, so it is optional, but it greatly enhances the user experience. Then we go to the database and there we have two areas at the user Once user take that a text is missing and once the user take lorcas. These two database felt we need now if we go on the button register start/edit workflow and there we make Account, be the User up impulse emails, value, input A's value value and we still add the field Username and we add the field User to the Lorcas. Here we make Input User named Value and for users in the Lower Keys we make Input User named Value and format that with Lorcas.

This helps us when users create their usernames once with upper or lower case, that this is of course also not occupied. Then we do Refresh the Page in this workflow and now our goal is that registration is only possible if the user name is still available. To do this, we use the Live Text element from the plugin, drag it once into our field, then go to Settings General.

And select if it is not already selected. Ex Post the option Adonai the attributes to html elements to then specify in the element itselfthe element id in which these user take. And now link this to our import user take and name this as the attributes user take as well. Then we go the text box user name is available and add a Conditional. Do Search for User and say User name Lover Keys is equal. Ticker text As well you. Format Lower Keys and we say Here the count must be greater than zero. That means we have at least one User Name that is the same. Then we change the text box to from are username is already used and we also change the from Color. On a No Code do. How copy here once the Expression, add this and make is equal to zero. And. Livesex a value. If No Code is Mutti, then we change the text.

On User Name is available with a background of the icon at the beginning and that of Caller. On Green. Finally, we are working on the regex formatting for the usernames. We want these to have only a to z uppercase, a to Z lowercase and a tepid keys underscore. Again, we have conditions for this. We say live text as well you. Extract Regex. And we add a regex pattern here. This I've also adapted you into the notes and we say here First Item is No Code. Live Texas ran. If this is the case, that the regex pattern doesn't match a value in the live text, so to speak, then there's an error message. And we also add Carlo's, which again corresponds in the red.

Then we copy the expression once more, add it and say if this corresponds with the Live Text Value and Livesex a value is not empty. Then we change the text. And also Kohler's to green. Finally, we now also want to signal to the user that the button is only quickbook if all conditions are met. To do this, we first take the expression here, copy it in, go to the conditional of the button. Add this and have Live Text Value is No Code live Text Value with the regex pattern. Which we have up here. Then we say or Do Search for User Users in the Lower Keys is the same. Live Text a value. Lower Keys.

And here the count is greater than zero. Or scrolling text as Beaulieu is mti exactly then. If the button is not clickable and we also want to change the colour of the whole thing by making the Background Color. To grey.

And also adjust Koller's. If this condition is not met, the button works as normal and is also quickbook as normal. We now go to the preview and test the whole thing. We see here that both conditions are fulfilled and that we can click the register button. A list of users is now displayed and we can now test the whole thing again. We take test one more time and we see that the user name is already used and we can also make a special character, where we then see that the user name is available, but the users are not allowed to use special characters. And the register button doesn't work.

But if we now do test 2, both conditions are fulfilled and we can click register. So we could see how we can work in Bubble with usernames that are individual to each user. This in turn can be used perfectly for subdomains, profiles or other situations.

If you liked this video, feel free to click on the Like button and subscribe to the channel if you have any questions. I wish you continued success with Bubble and see you soon.