:valid and :invalid selectors in jQuery

Question

In jQuery 3.2.1 , calling below expressions returns "undefined" (for both):

typeof $.expr[":"]["valid"]
typeof $.expr[":"]["invalid"]

However, it is possible to call $(":valid") or $(":invalid") and in the example below, it seems that these selectors return inputs that have valid or invalid value. It is not mentioned in the documentation that these selectors exist.

Please check this example for clarification.

• Can you explain where :valid and :invalid selectors are defined?
• How are these selectors resolved by jQuery?

Answer 1

jQuery does not contain its own implementation of the :valid and :invalid selectors. These selectors work in jQuery through the browser's native implementation of the standard via document.querySelectorAll() .

This also implies that $(":valid") and $(":invalid") will not work in browsers that don't support these selectors, such as Internet Explorer 8 (incidentally the only such browser that does implement querySelectorAll() ) and older.

Answer 2

:valid and :invalid are not a jquery selectors. It is a CSS3 selectors. It is defined in the CSS Selectors Level 3 spec as a “validity pseudo-selector”, meaning it is used to style interactive elements based on an evaluation of user input.

You can get more clarity from the following url.

CSS Selector :invalid