Re: :invalid

Yes, yes, yes!

I was actually drafting an email myself on this very subject for www-style.
I wrote an article [1] discussing the UX issues that stop this from being
really great.

At the moment a field is invalid straight away if it has the required
attribute.
My idea was to have a third state that a required field can be
indeterminate.
The same state that radio and checkbox inputs have [2]. Basically a field
technically is neither valid nor invalid until it has a value to work with.

Another potential solution, although probably more convoluted, was to change
the meaning of the :empty pseudo-class to also include empty inputs and not
just elements with no children.

[1] http://www.alistapart.com/articles/forward-thinking-form-validation
[2] http://www.w3.org/TR/css3-selectors/#indeterminate

--
Ryan

On Fri, Sep 24, 2010 at 10:16 AM, Mounir Lamouri
<mounir.lamouri@gmail.com>wrote:

> (Cross-posting this message which has been originatively sent to the
> whatwg mailing list considering it might be relevant for the www-style
> list.)
>
> Hi,
>
> The current whatwg HTML5 specification of :invalid is pretty simple: it
> matches all invalid elements which are candidate for constraint
> validation [1].
>
> Today, Gecko betas, Presto and Webkit support :invalid (I didn't check
> for IE). Unfortunately, :invalid is far from being perfect and most
> UI/UX guys would tell you that the current :invalid behavior is really
> bad. For example, having the invalid style applying as soon as you load
> the page (ie. for <input required>) is not a good thing. There are few
> UX rules like that that :invalid currently breaks.
>
> So, to improve the user experience while using web forms we would like
> to fix that. However, we are wondering if :invalid (and :valid?)
> specifications should be updated to take UX considerations or if a new
> pseudo-class should be created. Does anyone has an opinion about that?
>
> [1]
>
> http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#matching-html-elements-using-selectors
>
> Thanks,
> --
> Mounir
>
>