将隐藏输入字段视为'valid'

Question

为什么jquery选择器不认为隐藏输入是"有效的"，我该怎么办(即使其有效(。

console.log($("#a").is(":valid")); // true
console.log($("#b").is(":valid")); // false

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="a" type="text" value="abc">
<input id="b" type="hidden" value="def">

Answer 1

根据MDN:

隐藏的输入不参与约束验证；他们没有要约束的实际值。

因此将不会接收到任何valid或invalid伪类。脑海中浮现出几个选项，要么过滤集合以排除hidden输入，要么使用此检查作为解决方法：

$("#b").is(":not(:invalid)");

Answer 2

console.log($("#a").is(":valid")); // true
console.log($("#b").is(":valid")); // false

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="a" type="text" value="abc">
<input id="b" type="text" style="display:none" value="def">

将类型从隐藏更改为文本，然后使用CSS将显示属性更改为无