Chrome Doesn't Allow Decimal Values in Number Field Tag (HTML5)

As you may already know, HTML5 has introduced a number of new input types, one of which is the “number” type. As you might expect, this is a form field which accepts numeric input. So what happens in Chrome with the following HTML when we try to enter a decimal (floating point) number and submit the form?

Answer: Chrome pops up a validation error:

So what’s going on here? Is it a bug? It doesn’t fail in Firefox.

Well actually it’s not a bug; the form field is behaving as defined by the W3C.

Numeric input fields can take additional attributes min and step, which constrain the range of values allowed in your input.

The min attribute is fairly obvious: it’s the minimum value your number can be. An example could be: The above example will not allow the number values less than 5.

The step attribute is less intuitive: by playing with different values, you would most likely work out that it controls the increase/decrease when clicking the up/down buttons on the field. If you input the number 1 and click the up arrow, it will increase to 2. This is because the default step is 1. So far, so obvious. However, the step attribute also determines which values are valid, so a step of 1 means you can enter 1, 2, 3 etc. and a step of 2 means you can enter 2, 4, 6 etc, and when you click the up/down buttons the number will increase/decrease by 2 each time, but entering 3 or 5 in the box will cause a validation error. You can also use a decimal value: for example, a step of 0.3 will allow values such as 0.3, 0.6, 0.9 etc, but not 1 or 2.

To make you understand the above paragraph, I've written some examples to explain. Here are the examples.

We have not defined any step attribute in this example so clicking the Up/Down buttons on the field will Increment/Decrement the values by 1 because the default step value is 1.

In the above example we have defined the step attribute with a value '2' so now clicking on Up/Down buttons of field will Increment/Decrement the values by '2'

BUT WAIT

You should know that step attribute also validates the values entered in the number field. Any values which are multiple of step value will be valid and the rest of all will be invalid

For Example: According to this example only multiples of '0.3' will be allowed i.e: 0.03, 0.06, 0.09 but 1, 2 will not be allowed as they are not the multiples of '0.3'

Now coming back to the problem, We want to allow decimal values in the number field for chrome. For this purpose set the value of step attribute to 'any' like this:

Now you don’t get a validation error. Yay! Also note that if you only want to accept positive numbers, you’ll want to add min='0' e.g:

So the lesson here is that the step attribute is linked to both the Up/Down buttons and the range of values allowed in the field. When step='any', the Up/Down buttons will Increase/Decrease the number by 1. As far as I can tell, there is no way to have step='any' and an Increase/Decrease of more (or less) than 1 when clicking the Up/Down buttons. Feel free to enlighten me in the comments though!

OFF TOPIC:

If you want to disable client-side validation alogether, you can add the novalidate attribute to the tag, or you can add the formnovalidate attribute to the submit input button.

Reference: HTML5 input type=number and decimals/floats in Chrome