The step-by-step attribute of the HTML5 number input field, broken in Internet Explorer 10 and Internet Explorer 11

Question

It seems that some of my website users are having trouble trying to insert values ​​into the input fields of a type number with the step attribute set.

I am using Django 1.6 to render forms in HTML.

The number of fields is displayed in the base field of the DecimalField model with max_digits = 25 and decimal_places = 5

This leads to the following html example displayed for a number field:

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

The step attribute that 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 from -227 to 227 in IE10 and IE11. If I try to enter a lower or larger value (respectively) than this, I get a "You must enter a valid value" message and cannot submit the form.

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

The step attribute indicates the legal number intervals for the item.

Example: if step = "3", valid numbers can be -3, 0, 3, 6, etc.

So, in my user example, they tried to enter 20,000 as a value that failed in IE10 and IE11. If my calculations are correct, 20,000 correctly falls within the interval of 0.00001

The solution for me may be to remove the step attribute from all of my forms that use the number field, either through django forms or using javascript, but I think it will be a very dirty solution, and the other is against HTML5 grain.

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 are welcome. At the same time, I will be forced to provide my usual solution for affected users, offering to use a browser that works.

Answer 1

You are not alone, IE is very buggy.

I'm not sure about IE10, I can check IE11 right now, and it kind of treats number fields as date fields, which it actually shouldn't support at all, yet when passing, for example, 20000 it says "Insert valid date" (originally " Geben Sie ein gültiges Datum ein ").

Indeed, when you enter something like 01.01.2000 or 01-01-2000 it passes the test, although even 20000.01.123456789 passes, like 90000 or 0.foobar , so I assume that the check is just completely confused.

So for now, you probably have to use some kind of polyfill if you want to please IE users.

Answer 2

In this case, HTML5 authentication in IE10 is actually erroneous, so you may need to disable HTML5 form validation for this form.

You can do this by adding the novalidate attribute to the form tag. For example, you can 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 that it will not be useful, which should solve your problem. However, keep in mind that this will disable HTML5 validation for the entire form for all browsers. If you need to save this for some browsers by deleting it from IE, you will need to add the novalidate attribute via Javascript to load the page after checking the browser user agent. This user agent can be tampered with, but it is not an ideal solution.

Answer 3

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

Answer 4

It looks like IE10 + requires MIN and MAX to work properly. If you define these values, it will work fine with a 10000 value:

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

It looks like the step attributes for the entered number are only entered for Range Input, which requires minimum, maximum, and step values.

If you really cannot determine the value of min and max, you should use Javascript to do this.