Почтовая форма отправляется, даже после неудачной проверки

Question

Попытка заставить этот код работать с простой проверкой валидации в форме отправки. Появляется сообщение об ошибке, но форма все еще отправляется. Кто-нибудь может указать мне правильное направление.

function validateForm() {
  //Validate Name
  var title = $("#name").val();
  if (title == "" || title == null) {
    alert("Please enter");
    return false;
  }
  //Validate Title
  var title = $("#title").val();
  if (title == "" || title == null) {
    alert("Please enter");
    return false;
  }
  //Validate Company
  var title = $("#company").val();
  if (title == "" || title == null) {
    alert("Please enter");
    return false;
  }
  // Validate Email
  var email = $("#email").val();
  if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email == "" || email == null) {} else {
    alert("Please enter");
    return false;
  }
  return true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactform" method="POST" action="contact.php" onsubmit="return validateForm()">
  <input type="text" placeholder="Name :" id="name" name="name">
  <input type="text" placeholder="Title :" id="title" name="title">
  <input type="text" placeholder="Company :" id="company" name="company">
  <input type="email" placeholder="Email :" id="email" name="email">
  <input type="submit" value="Submit" id="sbmt">
</form>

Заранее спасибо.

Answer 1

Вам необходимо добавить прослушиватель событий, который предотвращает функцию по умолчанию, которая в этом случае представляет собой отправку формы. То есть function validateForm(e), а затем добавьте строку e.preventDefault() внутри функции.

function validateForm(e) {
  e.preventDefault();
  //Validate Name
  var title = $("#name").val();
  if (title == "" || title == null) {
    alert("Please enter");
    return false;
  }
  //Validate Title
  var title = $("#title").val();
  if (title == "" || title == null) {
    alert("Please enter");
    return false;
  }
  //Validate Company
  var title = $("#company").val();
  if (title == "" || title == null) {
    alert("Please enter");
    return false;
  }
  // Validate Email
  var email = $("#email").val();
  if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email == "" || email == null) {} else {
    alert("Please enter");
    return false;
  }
  return true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactform" method="POST" action="contact.php" onsubmit="return validateForm()">
  <input type="text" placeholder="Name :" id="name" name="name">
  <input type="text" placeholder="Title :" id="title" name="title">
  <input type="text" placeholder="Company :" id="company" name="company">
  <input type="email" placeholder="Email :" id="email" name="email">
  <input type="submit" value="Submit" id="sbmt">
</form>