Question

我在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>

Answer 1

您必须阻止提交按钮的默认行为。尝试使用以下代码

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

替换为

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

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

Answer 2

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

＆＃13;

$("#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");
    }
  });
});

＆＃13;

<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>

＆＃13;

表单即使在使用preventDefault后仍然提交

2 个答案: