HTML5 number input field step attribute broken in Internet Explorer 10 and Internet Explorer 11

Question

It appears some of my website's users are experiencing issues when attempting to insert values into input fields of type number with the step attribute set.

I am using Django 1.6 to render the forms to HTML.

The number fields map to an underlying DecimalField model field with max_digits=25 and decimal_places=5

This results in the following example html being rendered for the number field:

<input type="number" value="" step="0.00001" name="quantity" id="id_quantity">

The step attribute I know is not yet supported in FireFox but is in Opera, Chrome, Safari and IE10+

Everything works fine in all browsers except IE10 and IE11. In the above example the maximum range that can be entered is -227 to 227 in IE10 and IE11. If I try to enter a lower or greater value (respectively) than this I get a 'You must enter a valid value' error and cannot submit the form.

According to http://www.w3schools.com/tags/att_input_step.asp

The step attribute specifies the legal number intervals for an element.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

So in my user's example they were attempting to enter 20000 as the value which failed in IE10 and IE11. If my calculations are correct 20000 falls correctly into an interval of 0.00001

A solution for me could be to remove the step attribute from all my forms that use a number field, either via the django forms or using javascript, but I think this would be a very messy solution and one that goes against the grain of HTML5.

Has anyone else encountered a similar problem, have I done something wrong or is this a bug in IE10 and IE11?

Any thoughts, comments or answers welcome. In the meantime I will be forced into providing my usual solution to affected users by suggesting they use a browser that works.

Answer 1

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.

Answer 2

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