This is an example of a form that uses HTML5 Form Validation. It also uses a not-yet-production version of html5Forms.js to implement
some extra classes:
- .wf2_isBlank, .wf2_notBlank - used when a form element is blank/not blank.
- .wf2_lostFocus - used when a form element loses focus.
- form.wf2_submitAttempted - used when a form submit is attempted.
I propose using these classes as a starting point to have similar pseudo-classes (e.g. :isBlank, :lostFocus, etc)
so that they can be used without JavaScript. Using these classes, it is possible to:
- avoid emphasizing the invalid state of a form field until the user starts typing data into the field.
- emphasize to the user that s/he forgot to enter data in a form element when that
element loses focus.
- immediately emphasize all invalid form elements when the user unsuccessfully attempts to
submit an invalid form.
This page has been tested in the latest versions of Chrome, Firefox, Safari and Opera. Look at the CSS that is used for the validation hints.