HTML5 Form validation w/out JavaScript

Just created a form validation without Javascript in Codepen.
And I experimented some crazy colors.

The idea is creating a HTML5 form with error messages styled by CSS without JavaScript.
When filling text in the input field for example your email, it will validate using pattern attribute. Then it will show off an icon and error message if something is invalid.

Here is the code that triggers the error message for email element.
The ~ will check any sibling elements of input[type="email"] and not form element.

form input[type="email"]:required:valid ~
.errormsg--email {
  display:inline-block;
}

Also I want to use Font Awesome icons, instead of a background image/icon.