我一直在研究 HTML5 的 oninvalid 属性，但找不到太多关于它的文档。截至目前，在我的测试中，我发现它仅在单击提交按钮 (<input type="submit"/>) 并且其中的值无效时触发（例如它具有 required 属性并且值为空）。
有什么方法可以触发事件来验证字段中的值，如果存在无效值，该值又会触发 oninvalid 事件？
【问题讨论】：
标签： javascript html input
这样的事情应该会让事情更清楚：
<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 :)
【讨论】：
您正在寻找的方法似乎是reportValidity()。
您可以在整个表单上或仅在一个输入上调用它。
<form id=myForm>
<input id=myInput required />
</form><br>
<button onclick="myForm.reportValidity()">Form Validity</button><br>
<button onclick="myInput.reportValidity()">Input Validity</button>如果您不想向用户报告该值无效，可以致电checkValidity()。
如果值无效，这两种方法都会激活oninvalid event。
【讨论】：