The pseudo-classes :valid and :invalid.

Description of the pseudo-classes :valid and :invalid.

The pseudo-classes :valid and :invalid target elements whose value is valid and invalid, respectively. So here we're talking about elements like input fields. A value is considered valid if it meets the following conditions:

• It matches the data type defined in the HTML code (the type attribute of the input tag).
• It matches the input format defined by the pattern attribute.
• It falls within the range of allowed values set by the min and max attributes.
• It follows the step attribute which, along with min and max, defines the allowed values.
  For example, min="1" max="5" step="2" only allows the values 1, 3, and 5.
• The number of characters entered is within the range set by the minlength and maxlength attributes.

These two pseudo-classes can also be applied to forms. In this case, the selector :valid only kicks in if ALL the input fields in the form are valid, and the selector :invalid only does if at least one of the input fields is invalid.

Other pseudo-classes let you target input areas based on more specific criteria:

• :in-range and :out-of-range target elements whose value is within the allowed range or outside of that range.
• :required and :optional target required input fields and optional ones, respectively.

Examples of using :valid and :invalid.

Example on input fields.

The selectors :valid and :invalid are applied both to the form itself and to the different input areas. When all the elements of the form are valid, the form is also valid. If even a single area is invalid, the form is invalid.

Items with a valid value are outlined in green, and those with an invalid value are outlined in red.

• The "Postal Code" field is of the text type with a pattern that requires entering 5 digits.
• The "Reference" field must have between 5 and 10 characters: minlength and maxlength attributes.
  Also, this field is required (attribute required).
• The "Number" field is waiting for a numeric value (type="number"). Most non-numeric characters are blocked, but it is still possible to enter incorrect values like 5-5, 5+5, e3, etc.
  Since the minimum and maximum values have been set to 10 and 20 with a step of 2, you can also trigger the pseudo-class :invalid by entering a value outside this range or an odd number.
• The last two fields check that the input is in the correct format for an email address and a URL.

Example with input area groups fieldset.

The fieldset tag allows you to group input areas. Visually, this shows up as a rectangle around these areas, sometimes with a title. When applied to a fieldset, the pseudo-classes :valid and :invalid work just like on a form: the fieldset is valid if all the fields it contains are valid.

In the example below, both the username and password are required, and among the radio buttons you need to check one.

Browser compatibility.

The pseudo-classes :valid and :invalid don't cause any compatibility issues with current browsers.

1

:valid
:invalid
pseudo-class

Estimated overall support.

97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Edge

KaiOS Browser

Opéra

Firefox

Safari

Safari sur IOS

Chrome

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

History of pseudo-classes :valid and :invalid.

• Selectors Level 4

  This specification module defines new selectors that can be used in CSS.

  Regarding :valid Introduction of the :valid and :invalid pseudo-classes.
  

  September 29, 2011

  Working Draft.

  

  

  

See also...

The pseudo-classes related to input areas and their state at a given moment (read-only, valid, required, etc.) are listed below. Check out their description to learn more.

:autofill

⚠

:blank

:checked

⚠

:closed

A pseudo-class that targets an element that can be either opened or closed (such as a select menu), and that is in the closed state.

:default

Pseudo-class targeting checkboxes and radio buttons that are checked by default.

:disabled

Pseudo-class targeting locked input areas (those that have the disabled attribute).

:enabled

:in-range

:indeterminate

Pseudo-class referring to input fields whose value is indeterminate.

:invalid

Pseudo-class targeting input areas containing invalid information.

⚠

:open

A pseudo-class that targets elements that can be either opened or closed (such as select), and that are in the open state.

:optional

:out-of-range

:placeholder-shown

:read-only

:read-write

:required

:user-invalid

:user-valid

:valid

Pseudo-class designating input fields containing valid information.