Google Chrome pattern regex not working when dynamically creating form with setCustomValidity

Question

It seems dynamically adding customValidity is breaking the pattern validation. Is there any way to fix this issue using Javascript?

<html>
<head>
<title>Append validation issue</title>
<script>
function dothis(){
    var f = document.createElement("form");
    var i = document.createElement("input");
    i.type = "text";
    i.pattern = "[A-Z]{3}";
    i.setCustomValidity("watch me break");
    var s = document.createElement("input")
    s.type = "submit";
    f.appendChild(i);
    f.appendChild(s)
    document.getElementById("core").appendChild(f);
}
</script>
</head>
<body>
<div onclick="dothis()">click</div>
<div id="core"></div>
</body>
</html>

It will keep showing the Validity alert for username. the default action for not passing the regex. I also updated my issue. — K3NN3TH, Apr 27 '16 at 04:29
can you show us the code that's creating the form? Odds are your issue lays somewhere in that. — Jhecht, Apr 27 '16 at 04:35
guess I'll write something quick and see if the error reproduces. To try and show all the steps in creating the objects from this code is not that easy. — K3NN3TH, Apr 27 '16 at 04:40
Can I get an example of a username you expect to pass but it doesn't? — Rickkwa, Apr 27 '16 at 04:42
added some code to give an idea of how the for element in question is being created. and I'm entering AAA for username. — K3NN3TH, Apr 27 '16 at 05:02
@Jhecht I updated my answer with code that has recreated the issue. — K3NN3TH, Apr 27 '16 at 05:18
Look at this question and its accepted answer, maybe it will help: http://stackoverflow.com/q/16867407/2079781 — Rickkwa, Apr 27 '16 at 05:43
I've modified your code and I think this should fix it: https://jsfiddle.net/oL07go4s/ — Rickkwa, Apr 27 '16 at 05:46
@Rickkwa it does, if you want put it as the answer, I was heading for the same solution. Thanks! — K3NN3TH, Apr 27 '16 at 05:51

score 4 · Accepted Answer · edited Apr 27 '16 at 06:11

Using setCustomValidity will set the customError property to true, and thus the element will always be invalid.

So we should use setCustomValidity when text is invalid, and clear when valid.

function dothis(){
    var f = document.createElement("form");
    var i = document.createElement("input");
    i.type = "text";
    i.pattern = "[A-Z]{3}";
    i.oninput = function() {
        this.setCustomValidity('');
    }
    i.oninvalid = function() {
        this.setCustomValidity("watch me break");
    }
    var s = document.createElement("input")
    s.type = "submit";
    f.appendChild(i);
    f.appendChild(s)
    document.getElementById("core").appendChild(f);
}

https://jsfiddle.net/oL07go4s/

Why is nobody mentioning that we should clear `setCustomValidity` ? I've wasted so much time ... Thanks a lot mate. — NecipAllef, Nov 01 '16 at 20:02

Google Chrome pattern regex not working when dynamically creating form with setCustomValidity

1 Answers1