Question

我想验证输入表单是否需要＆＃39;属性，但似乎＆＃34; e.preventDefault（）＆＃34;不管用。表单提交并且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是一个阻止正常任务执行的函数。在这里，您可以阻止单击按钮。按钮没有这种形式的功能，因此不会有任何区别。您希望阻止de form提交。如果您将代码更改为：

$(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个表单。这将阻止表单提交。

在验证之前提交Jquery表单

3 个答案: