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

django, forms, html, internet-explorer-10, internet-explorer-11

Solution

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.

Problem

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.

Original source