Live Form Validation with :user-invalid CSS

A sign-up form with a name, an email address and a password. Each field turns red with a message when you leave it in a bad state, turns green with a check once it is right, and the submit button only lights up when the whole form is valid.

The rules are HTML attributes such as required, minlength, type email and a pattern on the password. The styling hangs off :user-invalid and :user-valid rather than :invalid. :invalid is true the moment the page loads, so every empty required field would start red. The user variants only match after the visitor has interacted with the field, so the form stays quiet until there is something to say. :has on the form lets the button react to the inputs above it.

Everything used here is Baseline. Submitting still runs the browser's own validation, so a field the visitor skipped entirely gets the native message on submit.