JQuery отправка формы перед проверкой

Question

Я хочу проверить форму для входных данных с атрибутами 'required', но похоже, что "e.preventDefault ()" не работает. Форма отправляется, и POST успешно, но с непроверенными данными, и я не могу найти, где проблема.

<form>
  <label for="name" class="control-label">Name</label>
  <input type="text" id="name" class="form-control" required>
  <label for="phone" class="control-label">Phone Number</label>
  <input type="text" id="phone" class="form-control" required>
  <label for="email" class="control-label">Email address</label>
  <input type="email" id="email" class="form-control" required>
  <div id="form-response"></div>
  <button class="btn btn-lg btn-primary btn-block" id="submit" type="submit" style="background-color:#28547C;">Request Appointment</button>
</form>

JS:

$(document).ready(function() {
    $("#submit").click(function(e) {
      e.preventDefault();
      var name = $("#name").val(),
        email = $("#email").val(),
        phone = $("#phone").val()
      $.ajax({
        type: "POST",
        url: 'https://a2xvt72c0c.execute-api.us-west-2.amazonaws.com/prod',
        contentType: 'application/json',
        data: JSON.stringify({
          'name': name,
          'phone':phone,
          'email': email
        }),
        success: function(res) {
          $('#form-response').html('<div class="alert alert-info" role="alert">Thank you! Appointment request has been sent. We will contact you soon. </div>');
        },
        error: function() {
          $('#form-response').html('<div class="alert alert-info" role="alert">Something went wrong... We are working on it!</div>');
        }
      });
    })
  });

JS Fiddle: https://jsfiddle.net/yhgz55y0/

Answer 1

Прямо сейчас вы используете событие нажатия, а не событие отправки. Если вы переключите его на:

$("#submit").submit(function(e) {...

проверка работает.

Answer 2

protectDefault - это функция, которая препятствует выполнению обычной задачи. Здесь вы предотвращаете нажатие кнопки. Кнопка не имеет функции в этой форме, поэтому не будет никакой разницы. Вы хотите запретить отправку формы. Если вы измените свой код на это:

$(document).ready(function() {
    $("form").submit(function(e) {
      e.preventDefault();
      var name = $("#name").val(),
        email = $("#email").val(),
        phone = $("#phone").val()
      $.ajax({
        type: "POST",
        url: 'https://a2xvt72c0c.execute-api.us-west-2.amazonaws.com/prod',
        contentType: 'application/json',
        data: JSON.stringify({
          'name': name,
          'phone':phone,
          'email': email
        }),
        success: function(res) {
          $('#form-response').html('<div class="alert alert-info" role="alert">Thank you! Appointment request has been sent. We will contact you soon. </div>');
        },
        error: function() {
          $('#form-response').html('<div class="alert alert-info" role="alert">Something went wrong... We are working on it!</div>');
        }
      });
    })
  });

Это при условии, что у вас есть только 1 форма на вашей странице. Это предотвратит отправку формы.

Answer 3

Ваша форма отправляется, потому что вы звоните на $.post() немедленно, без остановки. Вы хотите запустить проверку по переменным name, email и phone и, если они недействительны, return рано или поместить все это в блок if.

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