Why can't I enter 500 in a HTML5 number field?

Question

I keep getting strange unexpected validation errors with my HTML5 number field. This is my HTML code:

<input type="number" name="width" maxlength="5" placeholder="Width" value="733.95591182365" />&nbsp;Width<br />

When I enter 500 and submit the form, I receive the error: "Please enter a valid value. The two nearest valid values are 499.95591182365 and 500.95591182365."

I've solved the problem. The problem was this value="733.95591182365". I've altered my PHP code to round decimals to integers so that only integers can be echoed into the number field. Now I only receive errors when decimals are entered, which is OK.

Answer 1

You need to have step="any" as an attribute when working with type="number"

<form>
  <input step="any" type="number" name="width" maxlength="5" placeholder="Width" value="733.95591182365" />
</form>

Answer 2

For number inputs,

The step scale factor is 1. The default step is 1

Then, since there is no step attribute, the allowed value step is 1×1 = 1:

1. If the attribute is absent, then the allowed value step is the default step multiplied by the step scale factor.

And the step base will be 733.95591182365:

2. If the element has a value content attribute, and the result of applying the algorithm to convert a string to a number to the value of the value content attribute is not an error, then return that result and abort these steps.

Therefore,

Constraint validation: When the element has an allowed value step, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and that number subtracted from the step base is not an integral multiple of the allowed value step, the element is suffering from a step mismatch.

Since 733.95591182365 - 500 = 233.95591182365 is not a multiple of 1, that constraint is violated.

If you want another step, specify a step attribute. If you don't want any step, use step = "any".