[css-ui] Request for :dirty pseudoclass

I recently opened a bugzilla ticket on the HTML5 tracker[1] asking for
:invalid and related pseudoclasses to not match until the input was in
some sense "dirty", that is, until the user had directly interacted
with the control.  Hixie closed the ticket with WONTFIX and provided a
good reason for doing so - there are many reasons why you *would* want
immediate validation - as well as providing a suggestion for manually
implementing 'dirty' detection in a way that would interact with CSS
appropriately.

This seems silly to have to do manually, though, as most of the time
you *will* want to delay error messages until the user has interacted
with the input.  As well, it depends on js, which means that users
without js won't see the validation styling at all (without some
annoying hacks around the issue).

I propose a :dirty pseudoclass be added to CSS UI.  It would match any
input that the user has significantly interacted with, in the opinion
of the UA.  In standard browsers it would match as soon as the user
triggered a change event, but the exact details of when it matches are
up to the UA.

This way I can do styling like:

:invalid:dirty { border: 3px solid red; }
:invalid:dirty::after { content: "Please enter a valid email."; }

Without cluttering up the user's screen with confusing messages before
they're done typing.

[1]: http://www.w3.org/Bugs/Public/show_bug.cgi?id=7411

~TJ

Received on Wednesday, 23 September 2009 15:43:51 UTC