oninvalid event & Internet Explorer?

Question

I'm using the oninvalid event for customizing error validation messages. Apparently its not supported in internet explorer which i confirmed in my testing. I have to support IE 11. What kind of work arounds are there?

Edit:
Maybe it will be easier if i show a code example of exactly what i'm doing

"using strict";

(function setCustomValidation(doc) {
    var elems = doc.querySelectorAll("[required]");


    _.forEach(elems,
        function (item) {
            item.oninvalid = function(e) {
                e.target.setCustomValidity("");
                if (!e.target.validity.valid) {
                    e.target.setCustomValidity(e.target.getAttribute("data-errormessage"));
                }
            };
        });
})(document);

I'm making a shared utility that allows one to put a custom error message on any required element. So your not stuck with the default error message in the browser. I'm not sure if oninput, onchage, & onblur would work for this. Correct me if i'm wrong.

Here is a jsbin

Answer 1

I had the same issue, my code wasnt firing invalid event in IE11 neither I changed

item.oninvalid = (e) => { ... }

to

item.addEventListener('invalid', (e) => { ... });

and it worked. Hope it still helps you (or anyone else who comes across this)