Ensuring case sensitive unique usernames with only specific characters

[marcuslate]

I’ve been trying to make a working system for this and I have read pretty much every forum post on this topic, but I haven’t found a full solution for this system. Maybe I’m overlooking something, I’m fairly new to bubble.

So I have a field where users can change their username, and I want to make sure:

• Usernames are unique (So if username “John” is taken, no one can take “john” as a username)
• Can only contain letters a-z, numbers 0-9, and underscores (_).
• Usernames are stored case sensitive

I thought I could take usernames from the database and temporarily turn it to uppercase and compare it to the input’s value which is also temporarily turned uppercase. But I can’t seem to do that with the database text. As for limiting characters to only those types, I’m unsure how to go about it.

How do I go about doing this?

[marcuslate]

^(?=.{8,20}$)(?![.])(?!.*[.]{2})[a-zA-Z0-9.]+(?<![.])$

That regex expression seems pretty nice, where do I implement it? I’m new to regex and bubble.

for case do a search:lowercase

How? It does not let me set :lowercase on search data.

or save them lowercase then you can format them like :capitalised words later.

I want to allow people to make usernames like this; “userName”. So that won’t really work(?).

im passing out rn but can make you a demo later

That would be awesome.

[mebeingken]

Hey @marcuslate,

Here’s one way of doing it:

It uses the free Instant Text plugin as this gives immediate feedback to the user, rather than waiting for the delay in a standard input.

As much as I hate storing data in multiple places, I think that is really the easiest here, so this solution relies on storing the username in two fields, one for the original display and another that should always be lowercase. If you really don’t want to store two values, you could do the lowercase comparison in an advanced :filter operation, but that requires all of your usernames being downloaded to the client in the search, which could be problematic. As you note, you can’t do lowercase (or uppercase) comparison using a search constraint, but you can do it in an advanced :filtered operation. If you want to go that route, this post should help.

Here’s a link to the editor if you are interested in how it works:

Bubble Editor - ui-shared-samples

---

Looking to accelerate your app development?

Let me turn

into

Development through Coaching at https://uniqueideas.com or schedule a free intro session

Ken Truesdale
LinkedIn

[marcuslate]

@mebeingken

Here’s one way of doing it:

@mebeingken Thanks for the answer, that’s just what I need.

this solution relies on storing the username in two fields or you could do the lowercase comparison in an advanced :filter operation, which could be problematic.

So it’s kind of a workaround at this point.

you can’t do lowercase (or uppercase) comparison using a search constraint

Yes, I wish this was possible @emmanuel

Here’s a link to the editor if you are interested in how it works:

That demo is awesome! I think I will store two usernames for now. I will try to implement it and report back.

[marcuslate]

@mebeingken So I had something weird happen, I built the whole thing and it was working perfectly… for about 30 seconds. Then suddenly the Instant Text plugin just stopped working and everything broke.

So I deleted everything and built everything from scratch again but the Instant Text still does not work. But what’s weird is that the Instant Text does still work on my Index page. I don’t really know what is causing it, I don’t have any custom code on that page either.

Do you know a fix?

[andrewgassen]

Do you have other plugins on that page that aren’t on the index page?

[mebeingken]

That plugin behaves best if you set to not be visible on load, and then show it on the page load event…Did you copy that design over from my sample?

[marcuslate]

That plugin behaves best if you set to not be visible on load, and then show it on the page load event

@mebeingken Ah I didn’t catch that in your demo, that seemed to fix it! I Pretty much have it working now. The video cuts a little short but I have it set to save when the input changes.

[sudsy]

Wow, this is sweet! Just what I was looking for. Thanks for sharing, @mebeingken.

Took me a while to figure out where the “logic” was though. (For anyone else who might wonder, check the conditionals tab of the property editor for the text elements below the input.)

[iimarzdesignz]

hey how’s it going man i know this topic is 3 years old lol but i copied your workflow/conditions to the t but it isnt working on my application would there be any way you could help me with a few questions? id really appreciate your time