Email validation box-shadow overwritten by built in error message

Question

I'm trying to display a box shadow on the email input if the email address doesn't have an @ , but instead i get the error displayed on the screen like this :

Instead i want to display a red border on the input box like i did for the rest of the form.

If it helps i followed this tutorial on youtube : https://www.youtube.com/watch?v=L7Sn-f36TGM&list=PLRIuc7tqh1lv8Vb0FvXqDpWAhYU83NkCX&index=13&t=924s .

Here is the relevant code :

JQuery Code Here / All good besides the errorEmail which works but not as it should :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>


<script>
    var errorEmpty = "<?php echo $errorEmpty; ?>";
    var errorEmail = "<?php echo $errorEmail; ?>";
    var errorName = "<?php echo $errorName; ?>";
    var errorPhone = "<?php echo $errorPhone; ?>";

    if (errorEmpty == true) {
        $("#mail-name, #mail-phone, #mail-email, #mail-message").addClass("input-error");
    }
    if (errorEmail == true) {
        $("#mail-email").addClass("input-error");
    }
    if (errorName == true) {
        $("#mail-name").addClass("input-error");
    }
    if (errorPhone == true) {
        $("#mail-phone").addClass("input-error");
    }
    if (errorEmpty == false && errorName == false && errorEmail == false && errorPhone == false) {
        $("#mail-name, #mail-phone, #mail-email, #mail-message").val("");
    }
  
</script>

HTML code here :

 <div class="contact-form">
            <h2>TRIMITE-NE UN MESAJ</h2>

            <form id="contact-form" method="post" action="php/contact.php">
            <input id="mail-name"  name="name" type="text" class="edit-form" placeholder="Numele*"  /><br>
            <input id="mail-phone" name="phone" type="tel" class="edit-form" placeholder="Telefon*" /><br>
            <input id="mail-email" name="email" type="email" class="edit-form" placeholder="Email*"  /><br>
            <textarea id="mail-message" name="message" type="text" class="edit-message" placeholder="Mesaj*" row="4" ></textarea><br>
            <button id="mail-submit" type="submit" name="submit" class="submit-button">TRIMITE</button>

            <p class="form-message"></p>

            </form>

        </div>            

    </div>
 

PHP code here :

<?php

if(isset($_POST['submit'])){

    $name = $_POST["name"];
    $phone = $_POST["phone"];
    $email = $_POST['email'];
    $message = $_POST['message'];


    $errorEmpty = false;
    $errorEmail = false;
    $errorName = false;
    $errorPhone = false;

    if (empty($message) || empty($email) || empty($name) || empty($phone)) {
        $errorEmpty = true;
    }
    elseif (!preg_match("/^[a-zA-Z0-9]*$/", $name)) {
        $errorName = true;
    }
    elseif (!preg_match("/^[0-9]*$/", $phone)) {
        $errorPhone = true;
    }
    elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errorEmail = true;
    }

}

?>

There was also a bit of Ajax code which i didn't include here because i don't think is relevant , it all works fine there .