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?

Answer 1

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);"> 

Answer 2

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

Answer 3

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" />