liveBook · Manning

Dirty class

As explained in Tiny CSS Projects

The dirty class is a CSS class assigned to a form field after the user has navigated away from it.

A dirty class marks a form field after the user has interacted with it and moved away. JavaScript listens for the field’s blur event and adds dirty when the user clicks or tabs elsewhere. section 10.8

Combined with the :invalid pseudo-class, dirty prevents error messages from appearing before a user has had a chance to fill out the form. Untouched invalid fields remain quiet. section 10.8

Three field states

A name field can be invalid and dirty, valid, or invalid but not yet touched. The selector .dirty:invalid + .error span displays an adjacent error message only in the first state. section 10.8

How Tiny CSS Projects covers it

How deep it goes
Explains blur-based assignment, CSS selection, error visibility, border changes, and three resulting field states.
Examples
Uses a name field and CSS selectors to distinguish invalid dirty, valid, and invalid untouched states.
What you can do after
Apply JavaScript and CSS to show validation feedback only after users leave fields they have interacted with.
How it connects
Connects JavaScript, blur events, the :invalid pseudo-class, error messages, and the :user-invalid pseudo-class.
Cover of Tiny CSS Projects
liveBookmanning.com
Read Tiny CSS Projects on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.