Help With Form Validation And Sending Using iQuery (Ajax) & PHP

Hello Forum,
Please I need someone to look at my code and tell me what I am doing wrong. I have a web form I intend to collect data from and send via email. I am using Javascript for client-side validation and a PHP script to send the email. Also using Ajax to avoid page reload.

My problem is the PHP script doesn’t seem to be working as it isn’t sending the email. Formerly, it was working but the client-side validation script was not working. I seem to only be able to get either the PHP script or the validation script to work.

Please help me see my mistake. The code is below. Thanks!
(You can see the HTML and JavaScript code in this pen - https://codepen.io/obaitan/pen/XWjVyRo)

<html>
<head>
  <title>Form submit without refresh</title>
 <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;200;700&display=swap"
    />    
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap"
      rel="stylesheet"
    />
    <!-- Bootstrap core CSS -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Material Design Bootstrap -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css"
      rel="stylesheet"
    />    
</head>

<body>
  <div class="container">
    <form id="contact-form" name="contact-form" method="POST" action="" class="mt-5">                  
                  <div class="row">
                    <div class="col-md-12">
                      <div class="md-form mb-0">
                        <input
                          type="text"
                          id="name1"
                          name="name1"
                          class="form-control"
                        />
                        <label for="name1" class="">Name</label>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-lg-6">
                      <div class="md-form mb-0">
                        <input
                          type="text"
                          id="email1"
                          name="email1"
                          class="form-control"
                        />
                        <label for="email1" class="">Email</label>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="md-form mb-0">
                        <input
                          name="phone1"
                          id="phone1"
                          type="tel"
                          class="form-control"
                          placeholder="Phone Number"
                        />
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-md-12">
                      <div class="md-form mb-0">
                        <input
                          type="text"
                          id="subject1"
                          name="subject1"
                          class="form-control"
                        />
                        <label for="subject1" class="">Subject</label>
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-md-12">
                      <div class="md-form">
                        <textarea
                          type="text"
                          id="message1"
                          name="message1"
                          rows="4"
                          class="form-control md-textarea"
                        ></textarea>
                        <label for="message1">Message</label>
                      </div>
                    </div>
                  </div>
                  <div class="text-md-left">
                    <button
                      class="btn btn-success ml-0"
                      id="form-submit"
                      type="submit"
                    >
                      Send
                    </button>
                  </div>
                  <div class="text-center status" id="status"></div>
                </form> 
<div class="message_box" style="margin:10px 0px;">
</div>   
  </div>
  
  <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
    ></script>
    <!-- Bootstrap tooltips -->
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"
    ></script>
    <!-- Bootstrap core JavaScript -->
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"
    ></script>
    <!-- MDB core JavaScript -->
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"
    ></script>  

</body>

</html>
<script>
//Email Validation Function
function isValidEmailAddress(emailAddress) {
  var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
  return pattern.test(emailAddress);
}

$(document).ready(function () {
  // Form validation and sending with jQuery, AJAX and PHP
  var delay = 1000;
  $(".btn-success").click(function (e) {
    e.preventDefault();
    var name = $("#name1").val();
    if (name.length < 6) {
      $(".status").html(
        '<span style="color:red;">Enter Your Full Name!</span>'
      );
      $("#name1").focus();
      return false;
    }

    var email = $("#email1").val();
    if (email == "") {
      $(".status").html('<span style="color:red;">Enter Email Address!</span>');
      $("#email1").focus();
      return false;
    }
    if (email != "") {
      if (!isValidEmailAddress(email)) {
        $(".status").html(
          '<span style="color:red;">Email Address Provided Is Invalid!</span>'
        );
        $("#email1").focus();
        return false;
      }
    }

    var phone = $("#phone1").val();
    if (phone.length < 6) {
      $(".status").html(
        '<span style="color:red;">Enter A Valid Phone Number!</span>'
      );
      $("#phone1").focus();
      return false;
    }

    var subject = $("#subject1").val();
    if (subject.length < 5) {
      $(".status").html(
        '<span style="color:red;">Enter A Descriptive Subject!</span>'
      );
      $("#subject1").focus();
      return false;
    }

    var message = $("#message1").val();
    if (message.length <= 100) {
      $(".status").html(
        '<span style="color:red;">Enter Your Message Here (No Less Than 100 Characters)</span>'
      );
      $("#message1").focus();
      return false;
    }

    $.ajax({
      type: "POST",
      url: "ajax.php",
      data:
        "name=" +
        name +
        "&email=" +
        email +
        "&phone=" +
        phone +
        "&phone=" +
        phone +
        "&message=" +
        message,
      beforeSend: function () {
        $(".status").html(
          '<span style="color: orange; font - weight: bold;">Sending Message...</span >'
        );
      },
      success: function (data) {
        setTimeout(function () {
          $(".status").html(data);
        }, delay);
        $("#contact-form")[0].reset();
      },
    });
  });
});
</script>

//This is the PHP “action” script ajax.php

<?php if ( ($_POST['name1']!="") && ($_POST['email1']!="") ){ $name = $_POST['name1']; $email = $_POST['email1']; $phone = $_POST['phone1']; $subject = $_POST['subject1']; $message = $_POST['message1']; $to = "myemail@email.com"; $subject = "AllPHPTricks Contact Form Email"; $message = "

New email is received from $name.

$message

"; $host = $_SERVER['SERVER_NAME']; $email_from ="forms@$host"; // Always set content-type when sending HTML email $headers = "MIME-Version: 1.0" . "\r\n"; $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n"; $headers .= "From: .$email_from" . "\r\n"; $headers .= "Reply-To: .$email" . "\r\n"; $sent = mail($to,$subject,$message,$headers); if($sent){ echo " Thank you for contacting us, we will get back to you shortly. "; } else{ echo " Sorry! Your form submission failed. "; } } ?>