liveBook · Manning

Blur event

As explained in Tiny CSS Projects

A blur event is a browser event fired when an element loses focus.

A blur event fires when an element loses focus. Clicking or tabbing away from a form field triggers it, allowing JavaScript to detect that the user has interacted with the field. section 10.8

Showing errors after interaction

A form script listens for blur events and adds a dirty class to the field that was left. CSS can then combine .dirty with :invalid so error messages appear only for invalid fields the user has touched, rather than before interaction. section 10.8

How Tiny CSS Projects covers it

How deep it goes
Defines the event and demonstrates its validation role, but defers JavaScript listener implementation details.
Examples
Demonstrates clicking or tabbing away from fields and revealing errors through the .dirty:invalid + .error span selector.
What it assumes
Assumes form controls and JavaScript event listeners while defining blur behavior from the basic focus interaction.
What you can do after
Apply it via JavaScript to identify touched fields and coordinate accessible, delayed form-validation feedback.
How it connects
Connects blur events with focus, JavaScript event listeners, form validation, the dirty class, and the :invalid pseudo-class.
Cover of Tiny CSS Projects
liveBookmanning.com
Read Tiny CSS Projects on liveBook Get the book at manning.com

Also explained in

Compare how 2 books explain blur event →

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.