如何为 html 输入字段分派“无效”事件

【问题标题】：How to dispatch an "invalid" event for html input fields如何为 html 输入字段分派“无效”事件
【发布时间】：2018-06-01 16:29:14
【问题描述】：

invalid 事件在可提交元素被选中时触发并且不满足其约束。提交的有效性在提交其所有者表单之前或之后检查元素调用元素或其所有者表单的 checkValidity()。

是否可以在某些情况下创建和调度事件，以便触发 css 伪类“:invalid”和/或该元素的 checkValidity 函数返回“false”？

我正在考虑这样的代码 sn-p：

const evt = new Event("invalid", {bubbles: true, cancelable: false, composed: true});
document.getElementById("inputField").dispatchEvent(evt);

【问题讨论】：

标签： javascript css dom-events pseudo-class

【解决方案1】：

是的，这实际上是可能的，基于我多年前在 Mozilla 编写的名为 CSS 选择器侦听器的 hack：http://www.backalleycoder.com/2012/08/06/css-selector-listeners/。总结一下，它基本上劫持了 CSS 动画，以便在匹配目标选择器时立即触发事件。

我创建了一个小演示，展示了在工作中创建合成 invalid 事件的原始 hack，该事件 1) 实际冒泡，并且 2) 在输入值进入无效状态时立即自动触发：@987654322 @

HTML：

<input minlength="3" maxlength="5" />

CSS：

input:invalid {
  color: red;
  animation: invalid 0.001s;
}

@keyframes invalid {
  0%: {
    outline-color: #000;
  }
}

JS：

document.addEventListener('animationstart', function(e){
  if (e.animationName == "invalid") console.log(e);
});

【讨论】：