JQuery - 如何测试输入元素是否应用了有效或无效的伪类？答案

【问题标题】：JQuery - How to test if an input element has the valid or invalid pseudo-class applied?JQuery - 如何测试输入元素是否应用了有效或无效的伪类？
【发布时间】：2014-01-15 16:14:10
【问题描述】：

你能否测试一个输入元素是否使用 jQuery 应用了 CSS3 :valid 或 :invalid 伪类？我想在启用提交按钮之前测试表单元素是否通过了 CSS 验证。

我已经尝试过但不起作用的事情：

if($("#el").is(":valid")) {
    //...
}

if($("#el:valid").length == 0) {
    //...
}

$("#el").attr("valid")

【问题讨论】：

stackoverflow.com/questions/15820780/…
您使用的是哪个 jQuery 版本？由于我猜的一个错误，似乎仅在 1.9.x 中不适用于最近的 jQuery 版本
目前使用jQuery 1.9.1版本，或许可以升级一下。
是的，升级到 1.10.x 将解决此问题

标签： javascript jquery html css

【解决方案1】：

对于任何想知道如何使用 vanilla JS 的人。

inputEle.reportValidity() // `true` if valid, `false` otherwise

【讨论】：

【解决方案2】：

升级到 jquery 1.10.2 后，我可以确认使用 :valid 选择器现在可以正常工作。

if($("#el").is(":valid")) {
    //...
}

【讨论】：

遗憾的是，这似乎不适用于 webkit 伪类。
香草 JS 可以做到这一点吗？

【解决方案3】：

如果你的 Jquery 版本早于 1.10.2，你可以这样管理：

if ($('#subscriberNumTb:valid').length > 0) {
    //your code
}

【讨论】：

jQuery 3.5.0 抛出错误“语法错误，无法识别的表达式：不支持的伪：有效”
改用:invalid，它应该可以工作