Delay HTML5 :invalid pseudo-class until the first event

by

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.

More Related Contents:

  1. An invalid form control with name=” is not focusable
  2. Manually Triggering Form Validation using jQuery
  3. How can I change or remove HTML5 form validation default error messages?
  4. What’s the valid way to include an image with no src?
  5. HTML5 validation when the input type is not “submit”
  6. How do I get the collection of Model State Errors in ASP.NET MVC?
  7. Are nested HTML comments possible?
  8. HTML5 phone number validation with pattern
  9. HTML5 Required input styling
  10. What elements can be contained within a tag?
  11. Is there a minlength validation attribute in HTML?
  12. How do I make a field required in HTML?
  13. How do I style the HTML form validation error messages with CSS?
  14. How can I change or remove HTML form validation default error messages?
  15. Is div inside list allowed? [duplicate]
  16. Bad value X-UA-Compatible for attribute http-equiv on element meta
  17. Is the copyright meta tag valid in HTML5?
  18. What’s the point of valid CSS/HTML?
  19. How to get the text from the HTML5 input field error message in Selenium?
  20. Is it possible to validate the size and type of input=file in html5
  21. Trouble with image
  22. Is it necessary to write HEAD, BODY and HTML tags?
  23. vs vs for inline and block code snippets
  24. HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?
  25. Visible Area tag?
  26. problem with and :after with CSS in WebKit
  27. How To Auto-Format / Indent XML/HTML in Notepad++
  28. How to change the color of Element depending on its height or width?
  29. Form inline inside a form horizontal in twitter bootstrap?
  30. Get content between a pair of HTML tags using Bash

Leave a Comment