Adding regex input validation to InputText box

I’m trying to figure out a clean way of restricting BJS input text entry to decimal numbers (chars 0 to 9, decimal point and negative sign). The following regex expression works nicely in my Flutter interface: RegExp(r"^-?\d*.?\d{0,3}"))

How can I add the regular expression ‘^-?\d*.?\d{0,3}’ to a BJS InputText box?

It would be great if the BJS InputText box had a regex ‘pattern’ attribute :slight_smile:

Hi! Like this: (only digits allowed in this example)

1 Like

Thank you Roland. I don’t understand why it won’t work with my regex ^-?\d*.?\d{0,3} which should allow an optional minus, then digits, and optional decimal point and then digits to 3 decimal places. The regex works fine in Flutter and validates in online regex validators - any ideas why it doesn’t work here?

it’s not an optional decimal point. “.” is any (dot) character, so you need to escape it.

Forget regex and do this :smiley:

EDIT: And tailor to your needs. I don’t know a single person who can do regex properly all the time :smiley:

2 Likes

image
not NaN :smile:

Dude are you trolling or just being funny? :roll_eyes:

not trolling, you can paste in stuff that doesn’t match the regex the OP is asking for. 3e1 is 30.

Thanks. Doesn’t permit leading decimal point and 3 decimal place limitation tho :slight_smile:

I’ve tried loads of javascript stuff with regex and can’t get it to work…

A general regex solution would be useful to many people implementing text input, and a valuable addition to the documentation, IMHO.

/-?\d*\.?\d{0,3}/i.test('-1.3')

edit; you may want to group the decimal with the decimal places for a final verification as you want to allow it while typing - on key press can be restrictive for typing. typically a ‘blur’ event is easier for this kind of validation. agree validation would be helpful OOTB.

1 Like

What about proposing a solution instead?

@rjt there is a clipboard observable, text changed observable. Look it up in the GUI docs / api. The first PG shows how to restrict text in a BabylonJS input. The second one offers an alternative. You can modify the condition to whatever you like. Sorry, I can’t help you with the regex itself, because I always search for it on the web when I need something. I am not experienced in this field.

Kudos dude!

EDIT: however it’s not working :smiley:

I am getting curious why, can you please add it to the first PG and test it?

I would if I could get one to work…

Ok, give me a sec :slight_smile:

If that is intended for me - I don’t think I would propose a solution as part of GUI. regex will only get you so far - If I was building an application that needed to restrict input then I would probably try to bring in a 3rd party form validation library and hook it into GUI events. Maybe somebody in the community has already done so and will share.

I meant to propose a regex solution. And you did it but I saw if after I posted my reply. However your regex doesn’t work for me.

Which numbers doesn’t it work for?
image

3.3333333 for example

/-?\d*.?\d{0,3}/i.test(‘-1a.3’) contains a letter and returns true

Dude I’ll get back to you and try to help after having my meal :vulcan_salute: