当对其上放置标准HTML验证约束的表单字段(在这种情况下为pattern
& required
)通过.innerHTML
属性插入DOM时,该字段会不验证。我知道在事件注册方面使用.innerHTML
和document.createElement()
创建元素之间的区别,但之前没有遇到过这种副作用。
在我的特定情况下,必须将大量HTML插入到DOM中并通过document.createElement()
创建所有HTML,然后设置所有节点属性并使用.appendChild()
来建立适当的层次是不可取的。
为什么会这样,如果可能的话,如何克服它(请不要回答jQuery)?
注意:我知道 HTML <template>
,但由于在任何版本的IE中都不支持它,因此无法工作对我来说。
在下面的代码段中,第一个字段可以正常工作,但第二个字段展示了我正在谈论的内容。如果您手动输入数据(本例中为5位数)或按下按钮以动态插入有效数据,则无法验证。
document.querySelector("div").innerHTML = `<input type="text" id="broken" name="zip" pattern="\d{5}" required placeholder="I don't.">`;
document.querySelector("input[type='button']").addEventListener("click", function(){
document.getElementById("broken").value = "12345"; // 12345 or "12345" - doesn't matter
});
&#13;
:required { background:#f99; }
:valid { background:green; }
input[type=text] { width:250px; }
&#13;
<input type="text" id="zip2" name="zip2" pattern="\d{5}" required placeholder="I work as I should (5 digits please).">
<div></div>
<input type="button" value="Populate">
&#13;
答案 0 :(得分:3)
在正则表达式上缺少反斜杠:
"\\d{5}"
^
看看反斜杠是如何消失的:
console.log(`<input type="text" id="broken" name="zip" pattern="\d{5}" required placeholder="I don't.">`)
现在一切正常。
document.querySelector("div").innerHTML = `<input type="text" id="broken" name="zip" pattern="\\d{5}" required placeholder="I don't.">`;
document.querySelector("input[type='button']").addEventListener("click", function(){
document.getElementById("broken").value = "12345"; // 12345 or "12345" - doesn't matter
});
:required { background:#f99; }
:valid { background:green; }
input[type=text] { width:250px; }
<input type="text" id="zip2" name="zip2" pattern="\d{5}" required placeholder="I work as I should (5 digits please).">
<div></div>
<input type="button" value="Populate">