Form validation in HTML5 and PHP - styling errors in CSS

I have quite simple problem.

I have email field and textarea in form. E-mail is validated by default in HTML5 (I haven't provided any extra pattern), textarea minimum characters length can't be validated in pure HTML5. I do extra e-mail checking and textarea length in PHP

After sending form html5 says it's ok (no errors appear) when I have e-mail acąęść@example.com and textarea abc but PHP says it should be fixed. To highlight fields that's are not ok I set them class="error".

Now I have such styles for styling forms:

  input:focus:required:invalid,  textarea:focus:required:invalid, input.error,  textarea.error {
    border: 1px solid #f00;
    background: #fffacf image_url('invalid.png') 98% center no-repeat;
  }
  input:focus:required:valid   {
    border: 1px solid #82B81F;
    background: #fffacf image_url('valid.png') 98% center no-repeat;
  }

  input.error:focus:required:valid, textarea.error:focus:required   {
    background-image: none;
    border-color: #fff;
  }

The problem is when I have error class set to e-mail field and textarea when user focus on those elements I treat them as "undefined" - so no background image is set for them (that's what I want because HTML cannot validate them), but when I hover out of them they again appear as invalid, because .error class is set for them. I would like when user hovers out of them they appear the same as user hovered on them but of course when user doesn't hover to the error element it should still be displayed as "error" class.

Question - is it possible (not using Javascript/JQuery) to solve this anyway or simple it cannot be done using only HTML/PHP and CSS? PS. I don't have to use "error" class if it cause problem - I can do it other way if it will solve the problem