Question

我一直在研究HTML5的oninvalid属性，但找不到很多文档。截至目前，在我的测试中，我发现只有在单击提交按钮（<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：）

Answer 2

看来您正在寻找的方法是 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。

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

2 个答案: