Some browsers like Google Chrome pops up a validation error when we try to enter a decimal (floating point) number in a Number field and submit the form. Well actually it’s not a bug; the Number field is behaving as defined by the W3C.
Min and Step atrributes
The Number field can take additional settings “Min” and “Step”, which constrain the range of values allowed in your input.
- The “Min” number is the minimum value your number can be.
- The “Step” number controls the increase/decrease when clicking the up/down buttons on the field. For example, if you input the number 1 and click the up arrow, it will increase to 2. This is because the default step is 1.
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.
Important! But what if you want all the numbers to be valid, integers and decimals alike? In this case, set Step to “any”. And if you want to accept all the integers and decimals (not centesimals), set Step to 0.1
And what if I want to accept only possitive numbers? Just set the Min number to 0.