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

标签 javascript html input

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

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

最佳答案

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

<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 :)

关于javascript - 在输入字段上触发 'oninvalid' 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25165730/

相关文章:

javascript - jquery ajax无限滚动

javascript - 从 JSON 创建数组名称

css - 将消息和提交按钮对齐到其他输入字段的右侧

javascript - 一次打印一个数字

JavaScript addEventListener : pass argument to external event handler

jquery - 我想使用 jquery 操作 iframe 中的 html

html - 圆 Angular 表格 HTML 在数据增加时被削减

jquery - 模式弹出窗口 (div) 的关闭按钮(div 包含在其中)未完全显示

java - ArrayList 的输入

angular - angular4 应用程序中输入的最小值和最大值