即使在使用 preventDefault 后也提交表单答案

【问题标题】：Form getting submitted even after using preventDefault即使在使用 preventDefault 后也提交表单
【发布时间】：2017-02-14 15:01:23
【问题描述】：

我正在用 ajax 提交表单。我对输入格式使用了某些验证，例如时间和电话无验证等。但它在验证后提交表单。我确实使用 preventDefault() 来阻止表单提交，但它不起作用。

$("#sche_inter_form").submit(function(e) {
  if ($("#inter_name").val() === "") {
    $("#inter_name").css({
      "border-bottom": " 1px solid #dd4b39"
    });
    e.preventDefault();
  }

  if (($("#inter_date").val() === "") || (!(/^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d+$/).test($("#inter_date").val()))) {
    $("#inter_date").css({
      "border-bottom": " 1px solid #dd4b39"
    });
    e.preventDefault();
  }

  if (($("#inter_hr").val() === "") || (!(/^((0?[1-9])|(1[0-2]))(:|\s)([0-5][0-9])$/).test($("#inter_hr").val()))) {
    $("#inter_hr").css({
      "border-bottom": " 1px solid #dd4b39"
    });
    e.preventDefault();
  }

  if ($("#inter_mr").val() === "") {
    $("#inter_mr").css({
      "border-bottom": " 1px solid #dd4b39"
    });
    e.preventDefault();
  }
  e.preventDefault();
  var candidate_id = $('#candidate_id').val();
  var profile_id = $('#profile_id').val();

  var date, time, inter_name, meridian, dataString;
  var inter_name = $('#inter_name').val();
  var date = $('#inter_date').val();
  var time = $('#inter_hr').val();
  var meridian = $('#inter_mr').val();
  var dataString = 'inter_name=' + inter_name + '&inter_date=' + date + '&inter_time=' + time + '&inter_meridian=' + meridian + '&candidate_id=' + candidate_id + '&profile_id=' + profile_id;
  $.ajax({

    type: "POST",
    url: "/schedule_interview",
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: dataString,
    cache: false,
    success: function(data) {
      alert("Interview Scheduled Successfully");
    }
  });
});

这是我的表格

<form id = "sche_inter_form">
    <div class = "form-group">
        <input type = "text" id = "inter_name" placeholder = "Name of interviewer" required></input>
    </div>

    <div class = "form-group">
        <b><p id = "schedule_text">Interview Schedule session</p></b>
    </div>

    <input type="hidden" id="candidate_id"/>
    <input type="hidden" id="profile_id"/>

    <div class = "form-group form-inline">
        <input type = "text" id = "inter_date" placeholder = "dd/mm/yyyy" required></input>
        <input type = "text" id = "inter_hr"   placeholder = "hh:mm" required></input>
        <input type = "text" id = "inter_mr" placeholder = "AM/PM" required></input>
    </div>

    <div class = "form-group">
        <input type = "submit" class ="btn btn-primary" value = "Schedule"></input>
    </div>



</form>

【问题讨论】：

将 preventdefault 直接放在提交方法之后，然后进行验证或其他任何操作，然后提交（）；
将点击事件绑定到提交按钮并做preventDefault。
尝试返回false；而不是 preventDefault。

标签： javascript jquery ajax forms

【解决方案1】：

您必须阻止提交按钮的默认行为。试试下面的代码

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

替换为

$(".btn-primary").click(function(e){

您可以在提交按钮中添加 'id' 属性并在上面的代码中使用而不是 'class'。

【讨论】：

【解决方案2】：

inputs 不需要结束标签。从您的 html 中删除 </input> 并仅使用一次 e.preventDefault();。如果您想在某些情况下阻止表单提交，请使用return false

$("#sche_inter_form").submit(function(e) {
  e.preventDefault();
  if ($("#inter_name").val() === "") {
    $("#inter_name").css({
      "border-bottom": " 1px solid #dd4b39"
    });
  }
  if (($("#inter_date").val() === "") || (!(/^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d+$/).test($("#inter_date").val()))) {
    $("#inter_date").css({
      "border-bottom": " 1px solid #dd4b39"
    });
  }
  if (($("#inter_hr").val() === "") || (!(/^((0?[1-9])|(1[0-2]))(:|\s)([0-5][0-9])$/).test($("#inter_hr").val()))) {
    $("#inter_hr").css({
      "border-bottom": " 1px solid #dd4b39"
    });
  }
  if ($("#inter_mr").val() === "") {
    $("#inter_mr").css({
      "border-bottom": " 1px solid #dd4b39"
    });
  }
  var candidate_id = $('#candidate_id').val();
  var profile_id = $('#profile_id').val();

  var date, time, inter_name, meridian, dataString;
  var inter_name = $('#inter_name').val();
  var date = $('#inter_date').val();
  var time = $('#inter_hr').val();
  var meridian = $('#inter_mr').val();
  var dataString = 'inter_name=' + inter_name + '&inter_date=' + date + '&inter_time=' + time + '&inter_meridian=' + meridian + '&candidate_id=' + candidate_id + '&profile_id=' + profile_id;
  $.ajax({

    type: "POST",
    url: "/schedule_interview",
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: dataString,
    cache: false,
    success: function(data) {
      alert("Interview Scheduled Successfully");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="sche_inter_form">
  <div class="form-group">
    <input type="text" id="inter_name" placeholder="Name of interviewer" required>
  </div>

  <div class="form-group">
    <b><p id = "schedule_text">Interview Schedule session</p></b>
  </div>

  <input type="hidden" id="candidate_id" />
  <input type="hidden" id="profile_id" />

  <div class="form-group form-inline">
    <input type="text" id="inter_date" placeholder="dd/mm/yyyy" required>
    <input type="text" id="inter_hr" placeholder="hh:mm" required>
    <input type="text" id="inter_mr" placeholder="AM/PM" required>
  </div>

  <div class="form-group">
    <input type="submit" class="btn btn-primary" value="Schedule">
  </div>
</form>

【讨论】：