<input type=number> validation error in IE11 (Windows 7, 8)

Question

<input type=number> on IE11 / Win7 and IE11 / Win8, given min, max and step does not accept some number ranges as correct with validation error "You must enter a valid value"

In my example, I've selected min as -90, max as 90 (geographical latitude input) with step 0.00001.

For some reason, following value ranges are invalid:

• 24 to 77
• -75 to -49
• -33 to -7

Gaps between those ranges are valid

Testcase with error: https://jsfiddle.net/w0r05kq7/4/

Code:

<form>
  <input type="number" min="-90" max="90" step="1.0e-05" value="58,69374">
  <input type="submit"></input>
</form>

This does not happen with Edge or IE11 / Win10

I'd like to keep using number inputs because of its usefulness on other browsers, but I need some IE support as well. Are there any workarounds or should I just give up?

Answer 1

The issue is with how constraints are being validated in IE. I tested with value 34, and on calling method input.checkValidity, it returns false. Also on checking input.validity, it shows stepMismatch error as true. It seems it has some issue while calculating these validations

I have made a plunker to replicate and funny thing is if you set your step size to 4 decimal places, then it work for all the cases but as you increase to 5 decimal places, it produces validation errors.

1. Plunker Link: http://plnkr.co/edit/kiy4t302ivwsDWb1C1vG?p=preview
2. Constraint Validation: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
3. IE11 issue: https://connect.microsoft.com/IE/feedback/details/850187/html5-constraint-validation-is-broken-in-ie11-for-input-type-number

I hope this will give you some idea about root of the issue. You can develop with 4 decima places if it is possible. I will look if there is any workaound for 5 decimal places with IE and will update answer if I find any one