How to alter CSS based on whether a form field is valid or not

I have a simple form that can display 2 error codes at once, but I need only one to display (see below). #1 should be the only one displayed if user enters an invalid email , invalidity is determined by the form input text required pattern=.... Error #2 should be the only visible error if the email is valid. It is produced from a PHP result - this PHP file is called on via ajax within the form's html file and returns a result which is displayed as error #2.

My question: how do I apply an IF statement or similar, to determine whether the form's input field's pattern is satisfied or not. If it is unsatisfied (invalid) then perhaps we could make it's font-size 0px by altering it's CSS somehow, which would make only #2 visible. If it is satisfied, then we could continue to hide error #2's div somehow.

Here is the form (with error #2's hidden div "formResponse"):

<form id="loginform" name="loginform" method="POST" class="login" action="#">
    <input name="emailaddy" id="emailaddy" type="email" class="feedback-input" placeholder="My Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~)" required title="Invalid Email"/>
       <div id="formResponse" style="display: none;"></div>
       <button type="submit" name="loginsubmit" class="loginbutton">Login</button>

</form>

and the css:

 div.error, div.error-list, label.error, input.error, select.error, textarea.error {
      color: #D95C5C!important;
      border-color: #D95C5C!important;
      font-size: 18px;
    }

Should I manipulate label.error (error #1 css) and formResponse (error #2 div). Perhaps there's a better method.

Thanks so much, appreciate it!