как показать сообщения об успешном завершении и об ошибке в php, если они находятся в пределах div с отображением встроенного атрибута css: нет

Question

У меня очень простая форма для подписки на рассылку.Проверка выполняется как в jquery с использованием последней версии плагина, так и php.Я также включил ajax, чтобы остановить обновление страницы.JQuery часть кода, кажется, работает нормально.Тем не менее, у меня есть несколько других проблем: -

1. Сообщения об успехе и ошибках не отображаются в php,
2. Проверка PHP выбирает только 2 сообщения об ошибках "Имя требуется" и "Неверный формат электронной почты ".Когда я ввожу имя, сообщение об ошибке исчезает, но при вводе правильного формата электронной почты сообщение об ошибке остается.
3. Когда я отправляю форму, она переходит в верхнюю часть страницы, то есть обновляется, а ajax не останавливаетсяэто от этого.
4. Когда форма отправлена, она также меняет цвет заголовка на всей странице на зеленый (т. Е. Цвет 'successMessage').

Мой HTML и PHP-код находятся в одном файле с именем index.php.Код jquery находится в отдельном файле.Я также вставил код CSS на всякий случай (также отдельный файл).

Я потратил довольно много дней на поиск в Интернете возможных ответов на мои вопросы, но безуспешно.Я застрял, поэтому, пожалуйста, помогите.Заранее спасибо.

html

<div class="container" id="footer-container">

    <h5>Join My Mailing List!</h5>

<form role="form" id="subscribe_form" method="post" action="index.php">

    <div class="form-group" id="form">

        <input type="text" class="form-control mt-5" name="name" id="name" placeholder="Enter your full name" muted>
        <label class="error" for="name" id="nameErr"><? echo $nameErr; ?></label>

        <input type="text" class="form-control mt-3" name="email" id="email" placeholder="Enter your email" muted>
        <label class="error" for="email" id="emailErr"><? echo $emailErr; ?></label>

  </div>

  <button type="submit" id="submit" class="btn btn-dark"
 style="width:26rem" >Subscribe Now</button>



    <div id="successMessage" style="width:100%; height:100%; display:none;"><h6>Your email has been successfully added to the mailing list!</h6></div>
    <div id="errorMessage" style="width:100%; display:none;"> <h5>Error</h5> Sorry there was an error sending your form. </div>

   </form> 

   </div>

jquery

$(function() {

    $("form").validate({

        //set validation rules
    rules: {

      name: "required",
      email: {
        required: true,
        email: true
      },

    },

    messages: {
      name: "Please enter your name",
      email: {
        required: "Please provide your email",
        email: "Please enter a valid email"
        }
      },


        submitHandler: function(form) {

             $(form).submit(function(event) {
// Stop the browser from submitting the form.
event.preventDefault();

        $("#successMessage").show();        
        var formData = $(form).serialize();

    // Submit the form using AJAX.
        $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
        })   

  }); 

  }

});

});

php

<?php

$nameErr = $emailErr = "";
$name = $email = "";

 if ($_SERVER["REQUEST_METHOD"] == "POST") {
 if (empty($_POST["name"])) {
 $nameErr = "Name is required";
 } 
   // check if name only contains letters and whitespace
   if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
   $nameErr = "Only letters and white space allowed"; 
  }

 if (empty($_POST["email"])) {
  $emailErr = "Email is required";
} 
  // check if e-mail address is well-formed
  (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
   $emailErr = "Invalid email format"; 
  }


 // Set the recipient email address.

    $recipient = "myemail@hotmail.com";

    // Set the email subject.
    $subject = "New contact from $name";

    // Build the email content.
    $email_content = "Name: $name\n";
    $email_content .= "Email: $email\n\n";

    // Build the email headers.
    $email_headers = "From: $name <$email>";

    // Send the email.
    if (mail($recipient, $subject, $email_content, $email_headers)) {

        echo '<div id="successMessage">';

    } else {

         echo '<div id="errorMessage">';
    }
  }
 ?>

css

    #footer-container {

        width: 450px;
        height: 320px;
        text-align: center;
        padding-top: 50px;


    }

    #footer {

        background-color: #e5dcdc;
        padding-top: 40px;
        padding-bottom: 14px;
    }



    .btn {

        font-size: 120%;
        font-style: italic;

     }


    h5 {

        font-family: 'Tillana', cursive;

    }


    #image-ref {
        margin-left: auto;
        margin-right: auto;
        width: 7em
    }


    .error {

        margin-top: 4px;
        color: #ef2327;

    }

    #successMessage {

        padding-top: 15px;
        color: #3baf51;

    }

    #errorMessage {

        padding-top: 8px;
        color: #ef2327;
    }

Я неуверен, как плагин jquery взаимодействует с php.Предположим, мне все еще нужна проверка на стороне сервера, но они не работают в моем коде.