Re: [css3-ui] :valid :invalid - issues and possible solutions

Hello all,

I have been playing around with HTML5 Forms the last little while, and noticed
a few things that are (in my humble opinion) missing when it comes to creating
ideal user interfaces using :valid, :invalid, and :required:

1)      It seems a little confusing for a form element to be styled "invalid" when
        the user hasn't entered in any information.  For an example of what I mean,
        take a look at this example that I made for a blog post recently:

        http://www.useragentman.com/tests/html5Forms.beta/tests/html5Forms/validityStyling.html

        As you can see, the invalid state (the red x) appears when the element has
        focus even when no data has been typed in yet.  When I have shown this to
        users, I have been told that it seems a little counter-intuitive, and that
        it would make a lot more sense to have the red X appear only when at least
        one letter has been entered.  As far as I can tell, there is not way to do
        this with just CSS with :valid and :invalid.

2)      Let's say you were able to implement a form so the "invalid" hint
        appears only when at least one character has been typed in.  It would be
        nice to show the "invalid" state if the element loses focus *and* there is
        no data in the form element.

3)      Let's say the user attempts to submit the form and there is still some
        invalid data in the form.  It would be nice to show red X's next to the
        invalid fields when the form is submitted.

I have created the example below to show the three features I describe above:

http://www.useragentman.com/tests/html5Forms.beta/tests/html5Forms/validityStyling-experimental.html

Play around with this form ... fill out only some of the information (leaving
some of the fields blank) and then try to submit the form and I think (hope)
you should be able to understand what I am getting at.

This form uses a JavaScript HTML5 Forms polyfill which I have extended it to
simulate a few pseudo-classes that I think could solve some of these issues:

1) :isBlank, :notBlank - used when a form element is blank/not blank.
2) :lostFocus - used when a form element loses focus.
3)  form:submitAttempted - used when a form submit is attempted.

Take a look at the stylesheet and you'll see how I use these (simulated)
pseudo-classes to make the form behave the way I believe it should:

http://www.useragentman.com/tests/html5Forms.beta/tests/html5Forms/css/experimentalValidity1.css

Has this kind of functionality been discussed before? Is it possible that this
type of solution or an alternative one be impleneted in the CSS3 UI?  I believe
this kind of functionality would be useful for authors (like me :-) ).  What
do you folks think?

Cheers,
Zoltan.

--
Zoltan Hawryluk.  Client-side web technology specialist.

e: zoltan.dulac@...            t: @zoltandulac
w: http://www.useragentman.com