实现AJAX后，PHP验证无法正常工作

Question

I have code that validates the input inside the form and displays an error message in the div class="error" if condition is met. However, upon using AJAX to prevent page reload, the PHP validation no longer displays the message but still functions in the background. Does anyone why this is happening? How can I make the PHP validation work again? Thank you for help.

As you can see the validation error is supposed to show in $email_error

<form class="form_pro" action="index.php" method="post" role="form">

<input type="text" class="form" name="E-mail" placeholder="E-mail" value="<?= $email ?>">

<div class="error"><?= $email_error ?></div>

<button name="submit" type="submit" class="action_button"></button>

</form>

PHP

The error message here displays inside the "div" prior to adding AJAX code

if ($_SERVER["REQUEST_METHOD"] == "POST") {

 if (empty($_POST["E-mail"])) {
    $email_error = "E-mail is required";
  } else {
    $email = test_input($_POST["E-mail"]);

    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $email_error = "Invalid email format"; 
    }
  }
}

jQuery

After adding this to prevent page reload on submit, the PHP error message no longer shows

$( document ).ready(function() {
    $(".form_pro").submit(function(e) {
        e.preventDefault();

        $.ajax({
            type: "POST",
            url: "php/interuni_process.php",
            data: $(this).serialize(), 
            success: function(data) {

            },
            error: function() {

            }
        });

    });
});

Answer 1

1) you need to echo the error message in server side and get the response from server and append it to that div

HTML : htm_page.php

<form class="form_pro" action="index.php" method="post" role="form">

    <input type="text" class="form" name="E-mail" placeholder="E-mail" value="<?= $email ?>">

    <div class="error"></div>

    <button name="submit" type="submit" class="action_button"></button>

    </form>

PHP :destination.php

   if ($_SERVER["REQUEST_METHOD"] == "POST") {

        $email_error='';

     if (empty($_POST["E-mail"])) {
        $email_error = "E-mail is required";
      } else {
        $email = test_input($_POST["E-mail"]);

        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
          $email_error = "Invalid email format"; 
        }
      }

          echo $email_error;
    }

AJAX : html_page.php

    $( document ).ready(function() {
        $(".form_pro").submit(function(e) {
            e.preventDefault();

            $.ajax({
                type: "POST",
                url: "destination.php",
                data: $(this).serialize(), 
                success: function(data) {

                 if(data.trim() !='')
                 {
                    $('.error').html('<h1>'+data+'</h1>');
                 }

                },
                error: function() {

                }
            });

        });
    });