Question

似乎动态添加customValidity打破了模式验证。有没有办法使用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>

Answer 1

使用setCustomValidity会将customError property设置为true，因此该元素将始终无效。

因此，我们应该在文本无效时使用setCustomValidity，并在有效时清除。

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/

使用setCustomValidity动态创建表单时，Google Chrome模式正则表达式无法正常工作

1 个答案: