如何根据表单字段是否有效来更改CSS

Question

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;
    }

Updated AJAX (via reggie's answer) - NOTE: I don't think if(ema == null || ema == '') is working, because even if the user enters gibberish it still displays both errors. But if I change it to if(ema == 'a'), it properly hides formResponse div and only shows label.error. I need it to hide formResponse if the field is invalid/null - but null doesn't seem to work. Also, the else function doesn't work, meaning the label.error div won't hide for some reason. Perhaps null should be replaced with a regular expression check?

UPDATED AJAX: Why is it treating "[e-mail]" as null?

<script>
 $(document).ready(function() {

    $("#loginform").submit(function(e){
        e.preventDefault();
        $.ajax({
                type: "POST",
                url: "login/login.php",
                dataType:"text",
                data: {email: $('#emailaddy').val(), loginsubmit: 'yes'},
                success:function(result){   
                    if(result === "redirect"){
                      window.location.replace("http://www.example.com/login/private.php");
                    }
                else{
                       //var re = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
                       var email = $('#emailaddy').val();
                       var pattern = ".+\\@@.+\\..+";
                       var valid = email.match(pattern);
                       alert(valid);
                           if (valid == null) {
                                               } 
                        else {
                        $("#formResponse").html("That email address is not registered.").show();
                             } 
                    }
                                     }
            })
    });
});
</script>

Answer 1

In ajax, you could check the email and stop it from going to the server if invalid:

var ema = $('#useremail').val();      

if(ema == null || ema == '' //or whatever)         
{
$('.error1').show();
$('.error1').html('Nope');
$('.error2').hide();

return;
}
else{
//continue with ajax

Then handle any errors coming back from php like:

success: function(responseText) { 
if(responseText == "1") {
    $('.error1').hide();
$('.error2').show();

$('.error2').html(//the error msg);
}