Problem with HTML5 input type number dynamic validation with regex

Question

I have a dynamic input generated with a simple jQuery(...).apend(...) that draw this code on my webpage:

<input type="number" name="19000003" min="0" max="99999999" required="" step="0.1"
oninput="/^(?:\d{0,8})(?:,\d{0,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0,-1);">

I can validate the first part (maximum size of characters including ','), but it gives me an error when y try to validate decimals.

he specified value "111." is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

When I test the regex code on the Chrome console it works (like these examples)

/^(?:\d{0,8})(?:,\d{0,3})?$/.test('1234,12');
/^(?:\d{0,8})(?:,\d{0,3})?$/.test('123,');

but doesn't works inside the input. What could I be doing wrong?

Wiktor Stribiżew · Accepted Answer · 2019-04-01 18:30:29Z

2

Your regexp does not work because you are trying to match a , on the input. However, even if you see a , on the browser, internally It is stored as . (probably to avoid the sort of problems you are facing now when the browser uses different locales)

So use /^\d{1,8}(?:\.\d{1,3})?$/ for your regex instead.

Here I leave a demo of the code. I have added an alert for every keypress so you can see how It is stored. Try to write 1,1 and see what happens.

<input type="number" name="19000003" min="0" max="99999999" required="" step="0.1"
oninput="alert(this.value); /^\d{1,8}(?:\.\d{1,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0,-1);">

edited Apr 1, 2019 at 18:30

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

answered Apr 1, 2019 at 15:24

Julio

5,3161 gold badge16 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CVO Over a year ago

Oh ok I understand. Thanks you very much. I spent a lot of time without considering that point.

Renan Vizza Campos · Accepted Answer · 2019-04-01 15:48:09Z

1

In addition to Julio's answer

note that step="0.1" can also break your form validation.

It's better to adhere to your regex validation (for 3 decimals, step="0.001")

More info here

answered Apr 1, 2019 at 15:48

Renan Vizza Campos

664 bronze badges

1 Comment

CVO Over a year ago

That's true I'll adapt that part too. Lots of thanks

Vadim Hulevich · Accepted Answer · 2019-04-01 15:21:40Z

0

try to separate function from element

    const myElement = document.getElementById("someInput");
    myElement.oninput = function(ev) {
        /^(?:\d{0,8})(?:,\d{0,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0, -1);
    }

    <input type="number" id="someInput" name="19000003" min="0" max="99999999" required="" step="0.1" />

answered Apr 1, 2019 at 15:21

Vadim Hulevich

1,83311 silver badges17 bronze badges

2 Comments

CVO Over a year ago

Hi, thanks for the response, but doesn't works too and the idea is to have it dynamic without external functions, but thanks

Julio Over a year ago

While that is a good practice, It has nothing to do about what OP asked...

Collectives™ on Stack Overflow

Problem with HTML5 input type number dynamic validation with regex

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related