CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jjclarkson
jjclarkson

Reputation: 5954

JQuery - How to test if an input element has the valid or invalid pseudo-class applied?

Can you test if an input element has the CSS3 :valid or :invalid pseudo-class applied to it with jQuery? I would like to test if the form element passed the CSS validation before enabling a submit button.

Things I tried already that did not work:

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

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

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

Upvotes: 6

Views: 6795

Answers (3)

oldboy
oldboy

Reputation: 5964

For anybody wanting to know how to do it with vanilla JS.

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

Upvotes: 1

mici37000
mici37000

Reputation: 141

If your Jquery version is older than 1.10.2, you can manage it this way: 

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

Upvotes: 2

jjclarkson
jjclarkson

Reputation: 5954

After upgrading to jquery 1.10.2, I can confirm that using the :valid selector now works as expected.

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

Upvotes: 8

Related Questions