- From: Ryan Seddon <seddon.ryan@gmail.com>
- Date: Mon, 2 Jul 2012 09:07:08 +1000
- To: Zoltan Hawryluk <zoltan.dulac@gmail.com>
- Cc: www-style@w3.org, ian@hixie.ch, Tantek Çelik <tantek@cs.stanford.edu>
- Message-ID: <CADsa-Ve0Cyx_7ZVTb-NaE=q9xtcwdAK4fi-43Bp6NdtcAcWOxA@mail.gmail.com>
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 > > >
Received on Sunday, 1 July 2012 23:07:56 UTC