javascript - 在输入字段上触发 'oninvalid' 事件

Question

我一直在调查 oninvalid HTML5 的属性，但找不到太多关于它的文档。截至目前，在我的测试中，我发现它仅在单击提交按钮 ( <input type="submit"/> ) 且其中的值无效时触发(就像它具有 required 属性且值为空)。

有什么方法可以触发事件来验证字段中的值，而该值又会触发 oninvalid存在无效值时的事件？

Answer 1

这样的事情应该让事情更清楚:

<form id="myForm">
    <input id="myInput" required />
    <button type="submit">Submit Form</button>
</form>

<script>

var input = document.getElementById("myInput");
var form = document.getElementByid("myForm"); 

//attach event to fire on invalid:
input.addEventListener("invalid", function(){
    console.log("invalid element!");
});

//when one of these is called, the invalid event will be triggered
//(providing the input is left empty, since there is a required on it):
input.checkValidity();
form.checkValidity();


</script>

在输入元素(或封闭表单)上调用 checkValidity() 或在输入处于无效状态时单击表单提交按钮将触发我附加的无效处理程序并将消息记录到控制台。

当用户在输入中输入一个值时，它似乎没有被触发，尽管输入的有效性发生了变化(IMO 会非常有用!)

参见 https://developer.mozilla.org/en-US/docs/Web/Events/invalid :)