Email validation box-shadow overwritten by built in error message - php

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 .