IE11 and input type="number"

Question

I have a form with input type="number" which is giving me problems in IE11: some values are accepted and some others are not, apparently randomly.

Here's the code:

<input type="number" style="text-align:right" min="1.00" placeholder="1,00" name="value-name" id="value" step="0.01" title="title" required/>

For some reason IE11 accepts 9.2, 9.4, 9.5, 9.6, 9.7, 9.9 but refuses 9.3 and 9.8. This is just an example, it's happening with all numbers and I'm not understanding the reason behind it. Moreover some numbers were accepted some minutes ago but now they aren't anymore.

In addition to this, all of the previous values should not be valid because I'm in Europe and , is the delimiter for the decimal part, not .. Instead, when I use ,, IE does not traslates it to . and, when passed to PHP through a POST, PHP's is_numeric() returns false!

How can I make all of this work? Thanks

As a workaround you can replace commas with dots on your server side `return preg_replace("/[^0-9\\.]/", null, str_replace(",", ".", $string));` — Rulisp, Jun 20 '17 at 01:38
Also, I think you should look at this post on SO - https://stackoverflow.com/questions/15303940/how-to-handle-floats-and-decimal-separators-with-html5-input-type-number — Rulisp, Jun 20 '17 at 01:42
I've added the workaround on the server side and, reading the post you linked, I've decided to implement the check by adding the `formnovalidate` to my form and writing a function in Javascript. I've also decided to go for the dot as decimal delimiter, since the values I display in the webpage use dots too. However now I have another problem, because if I write in the form "6.5" for example and then I execute in Javascript `document.getElementById("value").value`, Firefox returns an empty string, since it only returns the number if I write it with a comma as decimal delimiter. — RVKS, Jun 20 '17 at 10:35
Ok the last problem seems to be gone by adding the attribute `lang="en"` in the form — RVKS, Jun 20 '17 at 10:58

score 0 · Accepted Answer · answered Jun 20 '17 at 11:30

I fixed this by accepting both . and , as decimal dividers.

I added the attributes formnovalidate lang="en" to the form input and performed the form validation through Javascript, with the following code:

function validateForm(minValue) {
var number = document.getElementById("value").value.replace(",",".");
if(number != "") {
    var isNaNres = isNaN(parseFloat(number));
    var isFiniteRes = isFinite(number);
    if (!isNaNres && isFiniteRes && number >= minValue && number.match("^[0-9]+(\.[0-9]{1,2})?$"))
        return true;

}
alert("<Error message>");
return false;
}

The regular expression match was needed to guarantee that the number had at maximum 2 decimal places

IE11 and input type="number"

1 Answers1