Validate Component

Form validation feedback using CSS :user-valid / :user-invalid pseudo-classes and the adjacent-sibling combinator (~). Works like Tailwind's peer syntax. Type into the inputs below to trigger validation.

Notes

Add .validate to an <input> or a wrapper <div> containing an input.
Place a .validate-* message container as a sibling after the validate element.
Message classes: validate-invalid, validate-required, validate-out-of-range, validate-user-invalid.
Customize messages via CSS variables: --i18n-valid, --i18n-invalid, --i18n-required, --i18n-outofrange, --i18n-wrongemail, --i18n-wrongurl, --i18n-wrongformat.

Basic validation

Pattern match — input 2 digits

Required

Range — min=0, max=100

Email type

URL type

With input variant styles

input-subtle + validate

input-rounded + validate

input-underline + validate (required)

Two markup structures

Structure 1: validate on input directly

Structure 2: validate on wrapper div

Custom messages

When .validate-* container has text content, it overrides the default i18n message.

Please enter exactly 3 digits

Custom email error message

Name is required

i18n variables

Override these CSS variables in :root to customize all validation messages globally:

--i18n-valid: "Validation passed";
--i18n-invalid: "Validation failed";
--i18n-required: "This field is required";
--i18n-outofrange: "Value is out of range";
--i18n-wrongemail: "Please enter a valid email";
--i18n-wrongurl: "Please enter a valid URL";
--i18n-wrongformat: "Invalid format";