:invalid Pseudo-Class

CSS :invalid Pseudo-Class

The CSS :invalid pseudo-class selects form controls whose current values do not satisfy their validation requirements. It can be used to provide visual feedback when information entered into a field does not meet the rules defined by HTML.

The :invalid Pseudo-Class

The :invalid pseudo-class is added directly to a selector with no space between the selector and the colon.

input:invalid {
  border-color: red;
}

The selector input:invalid matches an applicable <input> element when its current value does not satisfy one or more of its validation requirements.

HTML Form Validation

HTML can define validation requirements for form controls. These requirements can come from attributes such as required, min, max, minlength, maxlength, and pattern, as well as from input types that expect particular kinds of values.

<input type="email" name="email" required>

This field requires a value, and the value must satisfy the validation rules for an email input. If the current value does not meet the applicable requirements, the control can match :invalid.

Using :invalid with Email

An email input provides a simple example of how :invalid responds to a control's current value.

input[type="email"]:invalid {
  border: 2px solid red;
}

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

If the field is empty or contains a value that does not satisfy its email validation requirements, it matches :invalid. When a valid email address is entered, it stops matching :invalid.

Using :invalid with Required Fields

A required field is invalid while it does not contain a value that satisfies its validation requirements.

input:required:invalid {
  border-color: red;
}

The selector input:required:invalid matches only inputs that are both required and currently invalid.

Other Validation Rules

The :invalid pseudo-class can respond to several kinds of HTML validation requirements. For example, a number input can use min and max to define an acceptable range.

<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" required>

input[type="number"]:invalid {
  border-color: red;
}

If the value is outside the permitted range, the control can match :invalid. A value within the range that satisfies the other applicable requirements can match :valid.

:invalid vs :valid

The :invalid and :valid pseudo-classes describe opposite validation states for form controls that participate in constraint validation.

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

As the user changes the value of a control, the browser can automatically update which validation pseudo-class matches.

The Initial Invalid State

A required field can match :invalid as soon as the page loads because an empty required field does not satisfy its validation requirements. This means invalid styling may appear before the user has interacted with the form.

input:required:invalid {
  border-color: red;
}

Keep this behavior in mind when designing validation styles. Strong error styling on untouched fields can make a form appear to contain errors before the user has had an opportunity to enter any information.

Providing Validation Feedback

Invalid styling can help users notice a field that needs attention, but color should not be the only way an error is communicated. Clear instructions and browser or author-provided error messages can explain what needs to be corrected.

input:invalid {
  border: 2px solid red;
}

CSS indicates the validation state visually, while the HTML validation rules determine whether the control is valid or invalid.

When to Use :invalid

Use :invalid when form controls should receive styles because their current values do not satisfy HTML validation requirements. It can provide immediate visual feedback and can be combined with pseudo-classes such as :required when the styling should apply only to particular controls.

Validation styling should support clear form instructions and error information rather than serving as the only indication that a value needs to be corrected.

Summary

The CSS :invalid pseudo-class selects form controls whose current values do not satisfy their applicable validation requirements. It works with HTML form validation and can automatically respond as users enter or change information.

The next tutorial covers the :first-child pseudo-class, which selects an element when it is the first child of its parent.