检测伪类:从javascript无效

Question

有没有办法通过Javascript 检测元素:invalid上的伪类的"外观" input？

换句话说,当:invalid伪类出现在input元素上时,如何触发某些Javascript代码运行？

Answer 1

有一个无效的事件,你可以听取.

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

https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/invalid

还有一些属性可以访问以检查元素的有效性,如果这更像是你所追求的.

.validity.valid

该元素满足所有约束验证,因此被认为是有效的.

https://developer.mozilla.org/en-US/docs/DOM/ValidityState

编辑:自从我回答这个问题后,我学到了一些东西......

该.validity.valid实际上是约束的一部分约束验证API,对它的支持是参差不齐,充其量,这是太糟糕(有很多伟大的东西,API中).

但是,似乎运行良好的是querySelectorAll(':invalid'),它返回当前无效的所有表单元素的非实时NodeList.您可以addEventListener('change'在表单元素上调用..etc等,并在触发时查询validty.