:valid Pseudo-Class

CSS :valid Pseudo-Class

The CSS :valid pseudo-class selects form controls whose current values satisfy their validation requirements. It can be used to give users visual feedback when the information entered into a field meets the rules defined by HTML.

The :valid Pseudo-Class

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

input:valid {
  border-color: green;
}

The selector input:valid matches an applicable <input> element when its current value satisfies 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 must contain a value because it is required, and the value must satisfy the validation rules for an email input. When the current value satisfies the applicable requirements, the control can match :valid.

Using :valid with Email

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

input[type="email"]:valid {
  border: 2px solid green;
}

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

When the field contains a value that satisfies its email and required validation rules, it matches :valid and receives the green border.

Using :valid with Required Fields

A required field generally cannot be valid while it is empty. Once the user enters a value that satisfies the field's other validation requirements, it can match :valid.

input:required:valid {
  border-color: green;
}

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

Other Validation Rules

The :valid 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"]:valid {
  border-color: green;
}

A value within the permitted range can satisfy the control's validation requirements, while a value outside the range does not.

:valid vs :invalid

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

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

These selectors allow CSS to respond automatically as the validation state of a control changes. The next tutorial covers :invalid in more detail.

Providing Validation Feedback

Validation styles can help users recognize whether their input satisfies a field's requirements, but color should not be the only way important validation information is communicated.

input:valid {
  border: 2px solid green;
}

Browser validation messages, clear labels, instructions, and visible error messages can provide additional information when users need to correct their input. CSS should support that information rather than replace it.

When to Use :valid

Use :valid when form controls should receive styles based on whether their current values satisfy HTML validation requirements. It can provide immediate visual feedback and can be combined with pseudo-classes such as :required when styles should apply only to particular controls.

Remember that :valid reflects the browser's validation state. CSS itself does not determine whether the entered value is acceptable; the validation requirements come from the HTML control and its attributes.

Summary

The CSS :valid pseudo-class selects form controls whose current values satisfy their applicable validation requirements. It works with HTML form validation and can provide visual feedback as users enter valid information.

The next tutorial covers the :invalid pseudo-class, which selects form controls whose current values do not satisfy their validation requirements.