Form tests - CSS validation

Back to index.

This page tests several aspects of pure CSS form validation. Try to fill in the fields wrongly.

It contains rules for the following:

  1. input:(in)valid:not(:focus) — the not-focus serves to suppress onkeypress validation and instead use onblur validation.
  2. form:(in)valid
  3. fieldset:(in)valid
  4. label:(in)valid (doesn’t work anywhere, but why leave out labels if we’ve got forms and fieldsets?)

fieldset:(in)valid niet in Edge, Android WebKit, BB10, UC
Form zelfde?

Submit
Required fields
patterns
textarea

These require a manual test: you must attempt to fill in something. Why? Because some browser engineer was drunk at exactly the wrong time.

Note: due to a Firefox bug these tests cannot be in a fieldset.

Inactive elements
Submit

input:before

Here I test input:before, which works on some types in some browsers. It’s the most straightforward way of showing error messages with pure CSS.

Test of input:before