Bart Veneman

Creator of Project Wallace, analytics for CSS. <noscript>-fanboy. Serverless clearfix engineer. I can lift node_modules twice my own weight.

CSS Form validation

Form Validation: You want :not(:focus):invalid, not :invalid

Turns out that it is possible to giver proper user feedback about form validations, (partially) preventing the need to include heaps of javascript on a page to do basic validation feedback.

.error-message {
display: none;

input:not(:focus):not(:placeholder-shown):invalid {
border-color: var(--color-invalid);

input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
display: block;

input:not(:focus):not(:placeholder-shown):valid {
border-color: var(--color-valid);