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

This very subject has been brough up before[1]. Mozilla did end
implementing an experimental "-moz-ui-invalid"[2] that reacts how you would
initially think ":invalid" would work.

I would very much like to see this become part of the spec.

[1] http://lists.w3.org/Archives/Public/www-style/2010Sep/0717.html
[2] https://developer.mozilla.org/en/CSS/:-moz-ui-invalid

-Ryan

On Mon, Jul 2, 2012 at 3:02 AM, Zoltan Hawryluk <zoltan.dulac@gmail.com>wrote:

> 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
>
>
>