[Solved]-HTML5 number input field step attribute broken in Internet Explorer 10 and Internet Explorer 11

10đź‘Ť

You’re not alone, IE is pretty buggy on this.

I’m not sure about IE10, I can only test IE11 right now, and it kinda treats number fields as date fields, which it actually shouldn’t support at all, still when passing for example 20000 it says “Insert a valid date” (originally “Geben Sie ein gültiges Datum ein“).

And indeed, when entering something like 01.01.2000 or 01-01-2000 it passes validation, though even 20000.01.123456789 passes, just like 90000 or 0.foobar, so I guess the validation is just totally messed up.

So for the time being you’ll probably have to use some kind of polyfill in case you want to please IE users.

👤ndm

7đź‘Ť

IE10’s HTML5 form validation is really buggy in this case, so you might want to consider disabling HTML5 form validation for this form.

You can do this by adding a novalidate attribute to the form tag. For example, you might want to do something like this:

<form method='POST' action='.' novalidate='novalidate'>
    <input type="number" value="" step="0.00001" name="quantity" id="id_quantity">
</form>

Setting novalidate will tell the browser to not try to be useful, which should work out your issue. However, please be aware that this will disable the HTML5 validation for the whole form for all browsers. If you need to keep this for some browsers while removing it from IE, you’ll have to add the novalidate attribute via Javascript on page load after checking the browser user agent. This user agent can be spoofed however so it’s not an ideal solution.

👤wdh

5đź‘Ť

I ran into the same issue and adding step="any" at the field level fixed the issue for me.

👤Waqar Arshad

2đź‘Ť

It looks like IE10+ need a MIN and MAX value in order to work properly. If you defines these values it will work just fine with the 10000 value:

<input type="number" value="" step="0.00001" min="-100000" max="100000" name="quantity" id="id_quantity" />

Seems that step attributes for numer input just implemented as for Range Input which needs min, max and step values.

If really you are not able to define a min and max value, you must use Javascript to do that.

👤DePhiless

Leave a comment