Why is a hidden input not considerd 'valid' by the jquery selector and what can I do about that (i.e. to make it valid).
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">As per the MDN:
Hidden inputs don't participate in constraint validation; they have no real value to be constrained.
And as such will not receive any valid or invalid pseudoclasses. A couple of options come to mind, either filter the collection to exclude hidden inputs or use this check as a workaround:
$("#b").is(":not(:invalid)");
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">Change type from hidden to text, then use CSS to change the display property to none
