Adding regex input validation to InputText box

Questions
21

Thx v much! Enjoy :slight_smile:

22

Thanks :slight_smile:

Try this one:

It’s a bit verbose but I want you to get how it’s working.

23

This one allows values such .333 without a leading zero. If you want to handle this case as well we need to tweak it a bit tho.

1 Like
24

There might some edge cases where this is not working correctly. I’ve just find out it allows a value of `3.456…’. Going to fix it. Test it thoroughly and let me know if you need more hep but it would more beneficial to you if you fix these errors yourself. :vulcan_salute:

EDIT: here you go

And If I wanted you to be more lost and maybe amaze a bit replace the checkText function with this. You should get the same result:

    const checkText = () => {
        const tokens = input.text.replace(/[^\d.-]/g, '').split(decimalChar) 
        input.text = `${tokens[0]}${tokens.length === 2 ? decimalChar + (tokens[1] ? tokens[1].substring(0,3) : null ?? '') : ''}`
    }

or

Math.round(parseFloat("aa-02200.3333.00aa".replace(/[^\d.-]/g, ''))*1000)/1000

result is -2200.333

25

@roland Genius! Thanks for your help - I’ve slightly generalised to:

    addValidation(input);

    function addValidation(ctrl) {
        ctrl.previousText = '';
        ctrl.onBeforeKeyAddObservable.add((e) => {
            // store the value of the input before the keypress is processed
            ctrl.previousText = ctrl.text;
        })

        // this observable handles typing and pasting as well
        ctrl.onTextChangedObservable.add(() => {
            checkText(ctrl);
        });
    }

    const checkText = (ctrl) => {
        const tokens = ctrl.text.replace(/[^\d.-]/g, '').split(decimalChar) ;
        ctrl.text = `${tokens[0]}${tokens.length === 2 ? decimalChar + (tokens[1] ? tokens[1].substring(0,3) : null ?? '') : ''}`;
    }
1 Like
26

@rjt glad to help you!

27

Leaves me with a burning curiosity how to do it with the original regex expression :wink: - validates at regex101: build, test, and debug regex. Interestingly this site returns the following code snippet:

const regex = /^-?\d*\.?\d{0,3}/gm;
const str = `-1.2334544`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}
28

I was curios too :raccoon: This might work:

    const checkText = () => {
        input.text = /^$|^-?\d*\.?\d{0,3}/gm.exec(input.text)[0]
    };

Please pay attention to the observable which you use to fire the checkText method. In the PG it fires twice. So it would be better to attach it to the the keyboard input, both to typing and pasting or whatever is your scenario. And don’t forget to dispose your observers if you don’t need them anymore.

:vulcan_salute:

29

@roland This works great thanks - here’s the final code to add regex validation to an InputText box:

                var input = new BABYLON.GUI.InputText();
                addValidation(input);

                function addValidation(ctrl) {
                    ctrl.onTextChangedObservable.add(() => {    //This observable handles typing and pasting as well
                        ctrl.text = /^$|^-?\d*\.?\d{0,3}/gm.exec(ctrl.text)[0];
                    });
                }
2 Likes
30

Cool! :slight_smile:

31

@brianzinn Would it benefit other BJS users to add the following to the documentation?:

To validate InputText box input with a regular expression, add the following event handler to your InputText box (in this case named ctrl):

                ctrl.onTextChangedObservable.add(() => {    //This observable handles typing and pasting as well
                    ctrl.text = /^$|^-?\d*\.?\d{0,3}/gm.exec(ctrl.text)[0];
                });

You can use an online regular expression validator to develop and test the regular expression. In the above example, the expression ^-?\d*.?\d{0,3} does the main work of limiting input to positive or negative decimals to 3 decimal places.

32

If I can jump in: I think it will not. It’s has nothing to do with BabylonJS, it’s user code. However you can post a link to this topic in the Tutorials and tips.

EDIT: as @brianzinn wrote, for a a bigger applicatin one would opt for a validation framework and for simple cases it’s just enough to have it the Tutorials and tips. Justs my two cents.
:vulcan_salute:

33

@Roland - sure, I understand. It would have saved me a lot of time if I could have seen this when trying out InputText boxes for the first time. I’m new to BJS, building a fairly ambitious application, and translating my coding ideas into BJS takes time T = n * t, where n is the number of things to implement in code, and t the time to get my head around each thing!

34

I see dude, but this code will work for any HTML (or whatever) input and it’s not BabylonJS specific as I said. But you can ask for it in the Feature requests category of course :slight_smile:

EDIT: would you please mark one of the solutions as accepted please, so the question will be closed. Thx!

35

that is maybe a good question for @msDestiny14 - I see lots of GUI questions sent her way…