Question

I recently discovered that the :invalid pseudo-class applies to required form elements as soon as the page loads. For example, if you have this code:

<style>
input:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
</style>
…
<input name="foo" required />

Then your page will load with an empty pink input element on it. Having validation built in to HTML5 is great, but I don’t think most users expect the form to validate before they’ve had a chance to enter any values at all. Is there any way to delay the application of the pseudo-class until the first event affecting that element (form submit, blur, change, whatever’s appropriate)? Is it possible to do this without JavaScript?

Answer 1

http://www.alistapart.com/articles/forward-thinking-form-validation/

Since we only want to denote that a field is invalid once it has
focus, we use the focus pseudo-class to trigger the invalid styling.
(Naturally, flagging all required fields as invalid from the start
would be a poor design choice.)

Following this logic, your code would look something like this…

<style>
    input:focus:required:invalid {background-color: pink; color: white;}
    input:required:valid {background-color: white; color: black; }
</style>

Created a fiddle here: http://jsfiddle.net/tbERP/

As you’d guess, and as you’ll see from the fiddle, this technique only shows the validation styling when the element has focus. As soon as you move focus off, the styling is dropped, regardless of whether it is valid or not. Not ideal by any means.