Username formatting + value checking on sign up

Need help
1

Hi, I am a total newbie, so sorry, if this is a redundant question, I did not find this case so far.

The problem:

I need to format a username within the bubble user sign up process. Preferably, I would like to do it within the “sign-up user workflow step”. A workaround would be multi-step (create user object, make the now existing user select a username by changing current user field)

1) What I currently do:
make usernames’s value “lowercase” + “trim all blank spaces” with the bubble string operators.

2) What is missing on the processing side: comparing the now modified username with the database to ensure it is unique. And only then create the new user.

2.1) Problem on the frontend side: To not confuse the user, I would love to do this while the user is typing.
When it comes to the live formatting of the input, I just used a simple javascript.

document.getElementById(‘inputField’).addEventListener(‘input’, function(event) {
event.target.value = event.target.value.toLowerCase().trim();
});

and I think I could do the checking via an error message text filed conditional, like I do for name length and password strength already…

But the JavaScript is not working, and I do not know why.
If I create a Bubble-HTML element with a dummy input inside, it works and the string is transformed while typing. But once I just place the JavaScript inside the HTML element and assign the ID I gave to the bubble username input field, the JS does not work with it.

Thanks a lot!

2

I think I know what you are trying to do, but I don’t think I have a solution.

You want the user to key in the user name they want.

So they key in “Abe”. You convert this to “abe” and then you want to immediately check to make sure that there isn’t already a user with the name of “abe”.

They then type the letter “r” which results in “Aber”. You covert this to “aber” and then see if THAT user already exists.

Is this correct?

If so, I question the ability of Bubble to both do all that conversion of the string AND check the db quickly enough to keep from getting two people trying to use “aber” at the same time.

The only thing I can suggest is a workaround: Give the user a “check availability” button to see if that name is already taken.

Or do something similar to what Twitter does: if it’s taken, just add 1 to it. So if “aber” is taken, suggest to that person “aber1”.

BUT I would still also check the uniqueness of the name before committing anything to the database because there is always a chance (however slight) that someone may try to use the same name at the same time.

Sorry. Hopefully someone else can come up with something.

3

So it seems like you are fine with everyone having lowercase usernames…

So all you need to do is do the check while the user is typing to show the text saying “Username taken” (or hide if it’s not taken), do the check on the button itself to grey it out, and do the check one more time when they press the sign up button

Also Slugs are built into Bubble which are always unique usernames essentially, check the documentation out on that it might work for you here. They also show up in the URL bar so it’s easier on the eyes than long unique_ids

Probably using slugs would just eliminate doing all of this… just not sure how you can search for valid slugs on the fly…

4

Thank you very much @tylerboodman & @firstfifteensoftware, your feedback has been really helpful. In the end, I went with a mix of your suggestions. By locking the button, and also having a text below the input that indicates which criteria are not met, and also give a preview of the formatted username + a warning if already taken. That works and is sufficiently user-friendly, I think.

FYI, this is the result: The Uplift World Metaverse awaits you!

PS: Very interesting, will have a look at slugs next, since every user should be able to have a vanity username profile URL anyway.

1 Like
5

This topic was automatically closed after 70 days. New replies are no longer allowed.