Detect pseudo class :invalid from javascript

Question

Is there a way to detect the "appearance" of the pseudo-class :invalid on an input element through Javascript?

In other words, how could some Javascript code be triggered to run when the :invalid pseudo-class appears on an input element?

Maybe you can't use jQuery but have you try $('input').is(':invalid')? — ant_Ti
– ant_Ti, Commented Apr 4, 2013 at 13:33

score 17 · Accepted Answer · 2013-08-16 14:06:06Z

17

There is an invalid event that fires you can listen for.

The invalid event is fired when a submittable element has been checked and doesn't satisfy its constraints. The validity of submittable elements is checked before submitting their owner form, or after the checkValidity() of the element or its owner form is called.

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

There are also some properties you can access to check validity on elements, if that's more what you're after.

.validity.valid

The element meets all constraint validations, and is therefore considered to be valid.

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

Edit: I have learned some things since I answered this question...

The .validity.valid is actually part of the constraint Constraint Validation API, and support for it is spotty at best, which is too bad (there is a lot of great stuff in that API).

However, something that appears to work well is querySelectorAll(':invalid'), which returns a non-live NodeList of all the form elements that are currently invalid. You could call addEventListener('change' ..etc, etc on your form elements, and query for validty whenever that fires.

edited Aug 16, 2013 at 14:06

answered Apr 4, 2013 at 13:36

user1720624

Sign up to request clarification or add additional context in comments.

2 Comments

BoltClock Over a year ago

Using HTML where Markdown is available/more appropriate can lead to quirky post formatting. See stackoverflow.com/editing-help

Bergi Over a year ago

@jldupont: It's a standard, and afaik every browser that has HTML5 validation enabled supports it.

Collectives™ on Stack Overflow

Detect pseudo class :invalid from javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related