Form Validation

CSS-only validation using :user-valid / :user-invalid, plus JS-enhanced features via data-validate on forms.

CSS-Only Validation

Try it: Tab through fields without entering values, or enter invalid data, then move focus away. Validation appears only after you've interacted with each field. No JavaScript needed.

Registration Form (CSS-only)

3-20 characters, letters, numbers, and underscores only. Please enter a valid username. We'll never share your email with anyone. Please enter a valid email address. Must be at least 8 characters long. Password is too short. Please select your country.

Custom Error Messages

data-message-* attributes let you specify per-constraint error messages. The right message appears for the right validation failure — valueMissing vs typeMismatch vs tooShort get different text.

Custom Messages Form

Format: ABC-1234

Password Confirmation

data-match links a field to another field's ID. The values must be equal. This is impossible with CSS/HTML alone.

Create Account with Password Confirm

Checkbox Group Constraints

data-min-checked and data-max-checked on a fieldset enforce how many checkboxes must be checked. Native HTML has no equivalent.

Select 1-3 Interests

Interests

Error Summary — Summary Only

data-validate="summary" shows errors only in a top-level summary. Field-level <output class="error"> elements are hidden via CSS. Good for compact forms.

Compact Registration (Summary Only)

Error Summary — Summary + Field-Level

data-validate (no value, or "both") with an <output class="error-summary"> present shows both: a summary at the top AND inline errors on each field. Best for long forms.

Full Registration (Both Modes)

Topics of Interest

Pattern Validation (CSS-Only)

Pattern Validation

Format: 123-456-7890 Please use the format 123-456-7890. 5 digits, or 5+4 format. Please enter a valid ZIP code. Include https:// prefix. Please enter a valid URL.