[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@gmail.com            t: @zoltandulac
w: http://www.useragentman.com

Received on Sunday, 1 July 2012 20:57:20 UTC