驗證之前提交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小提琴： https ： //jsfiddle.net/yhgz55y0/

Answer 1

現在，您使用的是點擊事件，而不是提交事件。 如果將其切換為：

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

驗證有效。

Answer 2

您正在提交表單，因為您正在不停地立即調用$.post() 。 您想針對您的name ， email和phone變量運行驗證，如果任何無效，請盡早return或將整個內容放入if塊中。

e.preventDefault()作用是防止瀏覽器內置操作。 但是由於您的表單沒有動作或目標屬性，因此您實際上是在取消無操作，因此為什么這樣做沒有您期望的那樣。

Answer 3

preventDefault是防止正常任務執行的功能。 在這里，您可以防止單擊按鈕。 按鈕沒有這種形式的功能，因此不會有任何區別。 您要防止提交表單。 如果將代碼更改為此：

 $(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個表單。 這將阻止表單提交。