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

I have noticed that the CSS Selectors 4 has a draft for the pseudo-class
:user-error which looks like it may address most of the issues I had
described in my previous message, which is great! :D

One thing I would love to know about, though, is if there has been any more
talk as to what "*after* the user has significantly interacted with" means
(The :user-error pseudo-class represents an input element with incorrect
input, but only *after* the user has significantly interacted with it).
Has there been any more clarification on this?

Thanks in advance,
Zoltan.


On Sun, Jul 1, 2012 at 7:07 PM, Ryan Seddon <seddon.ryan@gmail.com> wrote:

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


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

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