Develop Reference

Problem with HTML5 input type number dynamic validation with regex

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?

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

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

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

HTML Implementing MaxLength but ignoring decimals

I'm implementing a text box in HTML with the MaxLength attribute. I want it to be 4 digits only but ignoring decimals. So a user should only be able to write a number from 0 to 9999. however, I want them to be able to add decimals like 9011.22. What would be the best way to go about implementing this? Will it need some kind of javascript?
here is my HTML tag:
<input type="text" name="lastname" value="Mouse">

Use the number type, it will allow you to set a min and a max. You can then use the step attribute to control the number of decimals.
You can add the required property to make this field required.
You can use this.checkValidity() in the onblur event to validate before submitting.
<form>
<input type="number" name="lastname" value="Mouse" min="0" max="9999" step="0.01">
<p><input type="submit" value="Submit"></p>
</form>

html regex validation limit only one period on decimal input

I made a HTML input which accepts decimal only.
<input type="text" class="form-control" id="price" name="price" placeholder="Price"
onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')">
This is working. However I need to modify the regex to accept only one period
Correct: 9.999
Wrong: 9.9.99.99
Is there a way? please don't use jquery validate and html type="number" (Users doesn't want the up and down arrow when you set the input to type number) Thanks

Sharing this answer to limit one period on decimal input
replace
this.value=this.value.replace(/[^0-9\.]/g,'')
with
this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')

Parsley.js - Validate optional input for only numbers

I have a form that has one optional input and 3 required input fields. For the optional input I have the below markup:
<input type="number" placeholder="0" min="0" max="20000" step="100" data-parsley-validation-threshold="1" data-parsley-trigger="keyup">
This does not fire the validation if I have type in letters or any other characters. It does validate for min and max values. If I put required attribute it does seem to work but I don't want that. I also tried defining a pattern as below:
data-parsley-pattern="^[0-9]*$"
None of them seem to work. Any ideas?

You can use data-parsley-type="digits". Notice the use of type="text" instead of number.
This works if you only want to allow digits (not floats).
<input type="text" placeholder="0" min="0" max="20000" step="100"
data-parsley-validation-threshold="1" data-parsley-trigger="keyup"
data-parsley-type="digits" />
If you want floats, you can use data-parsley-type='number':
<input type="text" placeholder="0" min="0" max="20000" step="100"
data-parsley-validation-threshold="1" data-parsley-trigger="keyup"
data-parsley-type="number" />

How to input float numbers in HTML form?

my code is as follows:
<input type="number" min="4.50" max="9.90" id="cpi" name="cpi" required="required" title="CPI" class="formfield3" />
CPI is a float value. But if I open it in browser and input value which is the float number such as 7.89 then it shows message of 'Invalid Value'. How to solve it?

Set step="any"
<input type="number" min="4.50" max="9.90" step="any" id="cpi" name="cpi" required="required" title="CPI" class="formfield3" />

The number type has a step value controlling which numbers are valid (along with max and min), which defaults to 1. This value is also used by implementations for the stepper buttons (i.e. pressing up increases by step).
Simply change this value to whatever is appropriate. For money, two decimal places are probably expected:
<input type=number step=0.01 />
(I'd also set min=0 if it can only be positive)
As usual, I'll add a quick note: remember that client-side validation is just a convenience to the user. You must also validate on the server-side!