Отправка формы, но функция Jquery не работает для проверки записей

Question

Проблема, с которой я сталкиваюсь, заключается в том, что, когда я нажимаю кнопку отправки, форма отправляется, но jquery не запускается, чтобы проверить отправленные данные и проверить правильность записей. Я подумал, что добавление form = "booking_form" к кнопке отправки, это решит мою проблему, вместо этого он разрешит отправку формы, но не проверку. Любая помощь будет оценена.

"use strict"
$(document).ready(function() {
  $("#reservation_form").submit(function(event) {
      var isValid = true;
      var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;
      var date = $("#dates").val().trim();
      $("#dates").val(date);
      if (date == "") {
        $("#dates").next().text("This field is required.");
        isValid = false;
      } else {
        $("#dates").next().text("");
      }
      var nights = $("#nights").val().trim();
      $("#nights").val(nights);
      if (nights == "" || !$.isNumeric(nights)) {
        $("#nights").next().text("Please enter a number.");
        isValid = false;
      } else {
        $("#nights").next().text("");
      }
      var name = $("#name").val().trim();
      $("#name").val(name);
      if (name == "") {
        $("#name").next().text("This field is required.");
        isValid = false;
      } else {
        $("#name").next().text("");
      }
      var email = $("#email").val().trim();
      if (email == "") {
        $("#email").next().text("This field is required.");
        isValid = false;
      } else if (!emailPattern.test(email)) {
        $("#email").next().text("Must be a valid email address");
      } else {
        $("#email").next().text("");
      }
      var phone = $("#phone").val().trim();
      $("#phone").val(phone);
      if (phone == "") {
        $("#phone").next().text("This field is required.");
        isValid = false;
      } else {
        $("#phone").next().text("");
      }
      if (isValid == false) {
        event.preventDefault();
      }
    } //end function
  ); //end submit	
  $("#tabs").tabs();
  $("#dates").focus();
  $("#datepicker").datepicker({
    minDate: new Date(),
    maxDate: +90,
    showButtonPanel: true
  }); //end datepicker function
  $("#book").button();
  $("#book").click(function() {
    $("#dialog").dialog({
      modal: true
    }); //end dialog
  }); // end click function
}); //end ready

  header {
  border: 3px solid red;
  background-color: green;
  margin-bottom: 2%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  width: 95%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 4% 2%;
  border: 3px solid blue;
}

main {
  display: flex;
  flex-direction: column;
}

section {
  margin: 0 15% 0 15%;
}

label {
  float: left;
  width: 10%;
}

input {
  margin-bottom: 3%;
}

.type {
  width: 100%;
  margin-bottom: 2%;
}

label.radiolabel {
  display: inline-block;
}

#dates {
  width: 16%;
  margin-bottom: 2%;
  float: none
}

input,
select {
  width: 16%;
  margin-left: 1%;
  margin-bottom: 3%;
}

#dialog {
  display: none;
}

#submit {
  padding: 0;
  margin: 0;
  border: none;
  width: 65%;
}

#adult {
  width: 6%;
}

#children {
  width: 6%;
}

h1 {
  color: red;
  margin-left: 35%;
}

span {
  color: red;
}

aside {
  margin-left: 30%;
}

aside button {
  width: 65%;
  margin: 2% 0 0 0;
}

@media only screen and (max-width:479px) {
  main {
    flex-direction: column;
  }
  body {
    width: 85%;
  }
  #adult,
  #children {
    width: 15%;
  }
  #datepicker,
  #nights,
  #name,
  #email,
  #phone {
    width: 45%;
  }
  #tabs li {
    margin: 2%;
    width: 95%;
  }
  #tabs li a {
    padding-left: 35%;
  }
  .type {
    margin-bottom: 5%;
  }
  span {
    margin-left: 18%;
  }
  section {
    order: 1;
    margin: 0;
  }
  aside {
    order: 2;
    margin-left: 12%;
  }
  input,
  select {
    margin-left: 3%;
    margin-bottom: 6%;
  }
  label {
    font-size: 100%;
    width: 30%;
  }
  aside button {
    width: 85%;
  }
  h1 {
    margin-left: 20%;
  }
  h2 {
    margin-left: 20%;
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Chapter 10-11</title>
  <link rel="stylesheet" href="../jquery-ui-1.12.1/jquery-ui.min.css">
  <script src="http://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="../jquery-ui-1.12.1/jquery-ui.min.js"></script>
  <script src="../js/reservationRequestWidget.js"></script>
  <link rel="stylesheet" href="../styles/normalize.css">
  <link rel="stylesheet" href="../styles/reservationRequestWidget.css">
</head>
<body>
  <header>
    <h1>Reservation Request</h1>
  </header>
  <main>
    <section>
      <form id="reservation_form" name="reservation_form" action="../submission.html" method="post">
        <div id="tabs">
          <ul>
            <li><a href="#tabs-1">General Information</a></li>
            <li><a href="#tabs-2">Preferences</a></li>
            <li><a href="#tabs-3">Contact Information</a></li>
          </ul>

          <div id="tabs-1">
            <label>Arrival Date:</label>
            <label id="dates"><input type="text" id="datepicker"></label><span>*</span><br>
            <label for="nights">Nights:</label>
            <input type="text" name="nights" id="nights"><span>*</span><br>
            <label for="adults">Adults:</label>
            <select name="adult" id="adult">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select><br>
            <label for="children">Children:</label>
            <select name="children" id="children">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
          </div>

          <div id="tabs-2">
            <label class="type">Room Type:</label>
            <input type="radio" name="room" id="standard" value="standard" checked>
            <label for="standard" class="radiolabel">Standard</label><br>
            <input type="radio" name="room" id="business" value="business">
            <label for="business" class="radiolabel">Business</label><br>
            <input type="radio" name="room" id="suite" value="suite">
            <label for="suite" class="radiolabel">Suite</label><br>
            <label class="type">Bed Type:</label>
            <input type="radio" name="bed" id="king" value="king" checked>
            <label for="king" class="radiolabel">King</label><br>
            <input type="radio" name="bed" id="double" value="double">
            <label for="double" class="radiolabel">Double</label><br>
            <input type="checkbox" name="choice" id="smoking" value="smoking">
            <label for="smoking" class="radiolabel">Smoking</label><br>
          </div>

          <div id="tabs-3">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name"><span>*</span><br>
            <label for="email">Email:</label>
            <input type="email" name="email" id="email"><span>*</span><br>
            <label for="phone">Phone:</label>
            <input type="tel" name="phone" id="phone" placeholder="999-999-9999">
          </div>
        </div>
      </form>
    </section>
    <aside>
      <button onclick=w indow.location.href="../index.html">Home</button>
      <button onclick=w indow.location.href="../reservationRequest/reservationRequest.html">Reservation Request</button>
      <button onclick=w indow.location.href="../imageCarousel/imageCarousel.html">Image Carousel</button>
      <button><input type="submit" id="submit" value="Submit" form="reservation_form"></button>
      <button id="book">Cancellation Policy</button>
      <div id="dialog" title="Cancellation Policy">
        Notification of cancellation or arrival date change must be received more than three days (72 hours) prior to the confirmed arrival date for the reservation deposit to be refundable. Email notification is acceptable, and a cancellation confirmation will
        be sent to you. Failure to check-in on the scheduled arrival date will result in the cancellation of the reservation including any remaining nights, and the reservation deposit shall be forfeited.
      </div>
    </aside>
    <footer>
    </footer>
  </main>
</body>
</html>

Answer 1

Если какая-либо часть вашего обработчика событий имеет ошибку и выдает исключение, event.preventDefault() не будет вызываться, и ваша форма будет отправлена. Вам следует поместить код обработчика событий в блок try { … } catch { … }, чтобы перехватить ошибки и обработать их.