How do you limit special characters in the input field for usernames?

[randyh628]

I basically want to restrict users from entering in the input field for usernames so question marks, commas, number signs, spaces, etc, are used for the username. Strictly only letters and numbers.

Thanks in advance!

[dbevan]

The button used to save the input’s data could have the following conditional:

When input field’s value contains “?”, this button isn’t clickable.

You could also have a text field below the input field that is the same value as the input field above, however, you use the “find & replace” function to remove question marks, commas, etc.

Example:

Input Text’s Value - abc?def,ghi#
Text’s Value - Your username will be abcdefghi

Then when you save the input’s data, you’ll use the same expression used in the text field (with the “Your username will be” of course).

Just a couple of ideas! Hope this helps,
Daniel

[philip]

Regex is probably better suited to your needs. Find & replace works too, ultimately your own choice.

A regex filter equal to:

(\`|\~|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\+|\=|\[|\{|\]|\}|\||\\|\'|\<|\,|\.|\>|\?|\/|\""|\;|\:|\s)

…filters out all of those characters. I use Regex when there’s a lot of restrictions on input.

See: Automatic creation of sub-app, subdomain DNS, SSL

[randyh628]

thanks for the fast reply @philip, now do I input this filter like shown below? and would I use
" :find and replace " with use regex pattern, or do I use " :extract with regex" ? I’ve inputed this in the initial content box instead of the conditional tab.

I followed the example you showed me in your other post but I didn’t see what you replaced these special characters with. Since the “replace with” box is empty.

Thanks again for your help!

Randy

[randyh628]

thanks for the prompt reply! this might sound like a dumb question, but what do you fill in the replace box for this to work?

Please see my screenshot below. Thanks again!

[dbevan]

Absolutely… positively… nothing. Haha. Is it not working the way you want?

[randyh628]

Yea not working. Still allowing the special characters to show up and still allowing users to sign up

[mguerrasio]

You can’t have a circular reference like that. You have the ‘Initial Content’ of your input field being set by an expression that uses the value of your input field. The suggestion was to have a second text field below your input to show what he username is going to be and then apply the regex AGAIN in the workflow when you save.

This, unfortunately is a sorely lacking feature of Bubble. If you could set the isValid property of an element you could use the regex in a condition and cause the field to be marked invalid and then Bubble would automatically stop it from submitting. I requested this feature here Set "valid" property for conditions

[alex5]

A possibly better approach would be to have a mask in the input field that enables/disables character types, so they can’t even be typed in the first place.
Other than for some weird case, a person’s name will only contain something like (sorry for my pseudo regex syntax)
[A-Z][a-z]+ and then . - ’ and maybe ,

so you can always put something like
Albert Higgins-Botham III
or Charles D’Artagnan
or Johann Strauss Sr.

but not mess it up with numbers, or any of the the Shift-Number symbols.

[randyh628]

thanks for the reply Alex, I think not allowing be typed would be the best solution. I’ve been playing with it for a little bit now, but still new to Bubble.

How does one apply a mask to the input field?

Thanks so much!

[alex5]

Sorry Randy, but I probably misled you with my answer.
The “mask” capability that I mentioned does not exist yet.

Since mguerrasio was talking about possible future capabilities, I thought I’d offer my two cents too.

[philip]

@randyh628 I put together a public example of something similar to what I have implemented in many of my apps:

Demo: Limit Input Value

Editor view: sandboxthings | Bubble Editor

Let me know if you have any questions (or recommendations for further improvement). The design is a bit rough due to being in a rush.

[mguerrasio]

I am not going to argue that masks would not be a good feature, but it would be limited to text inputs and it would be limited to whatever options the Bubble devs had time to build. If you could set the isValid property of an element, you could create any kind of validator you want, including using an external API.

[mguerrasio]

Ok, it was annoying me that there was no simple way to do a mask so I played around and came up with something. I’ll start with the caveat that it is bad interface design to just prevent certain keys from working without giving the user information that you are doing it, or when it is blatantly obvious (like when you ask for someone’s age and don’t let them enter ‘JK’). That warning said, here is how you can do it with JQuery

First, make sure to set the application to expose the ID attribute to HTML elements. Then, on your page, put a common id theme on the inputs you want to validate. (e.g. customValidation1, customValidation2, etc.) On elements you don’t want to be validated, put no attribute id.

Then through an HTML element onto the page and put this javascript into it (out it in script tags)

$( “:input[id*=‘customValidation’]” ).on(‘keypress’, function (event) {
var regex = new RegExp("^[a-zA-Z0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});

Poof, any inputs that contain the common id text will have a validator applied that uses the regex you define in the javascript.

Marc

Here is a demo https://helpexamples.bubbleapps.io/version-test/masks?debug_mode=true

and here is the editor to check it out.

Bubble Editor - helpexamples

[hgm.business]

Try this regex:

[\W_]