Javascript 即使在使用preventDefault后也要提交表单

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

采访日程会议

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

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

取代

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

---

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

输入不需要结束标记。从html中删除
，并使用
e.preventDefault（）仅一次。如果要防止表单在某些情况下提交，请使用
return false


$（“#sche#u inter_form”）.提交（函数（e）{
e、 预防默认值（）；
if（$（“#inter_name”）.val（）{
$（“#国际名称”）.css({
“边框底部”：“1px实心#dd4b39”
});
}
如果（$（“#国际日期”）.val（）===”）| |（！（/（0[1-9]| 1[012]）[-/.]（0[1-9]|[12][0-9]|[3[01]）[-/.]（19 | 20）\d+$/）测试（$（“#国际日期”）.val（））{
$（“#国际日期”）.css({
“边框底部”：“1px实心#dd4b39”
});
}
如果（$（“#inter#hr”）.val（）===”）|（！（/^（（0？[1-9]）|（1[0-2]）（：|\s）（[0-5][0-9]）$/）测试（$（“#inter hr”）.val（））{
$（“#国际人力资源”）.css({
“边框底部”：“1px实心#dd4b39”
});
}
如果（$（“#inter#mr”）.val（）=”）{
$（“#国际先生”）.css({
“边框底部”：“1px实心#dd4b39”
});
}
var candidate_id=$（'#candidate_id'）.val（）；
var profile_id=$（'#profile_id'）.val（）；
变量日期、时间、单位名称、子午线、数据字符串；
var inter_name=$（'#inter_name'）.val（）；
var date=$（'#inter#date'）.val（）；
变量时间=$（'#inter#hr'）.val（）；
var meridian=$（'inter#mr'）.val（）；
var dataString='inter_name='+inter_name+'&inter_date='+date+'&inter_time='+time+'&inter_meridian='+meridian+'&候选者_id='+候选者_id+'&配置文件_id='+profile_id；
$.ajax({
类型：“POST”，
url:“/schedule\u面试”，
标题：{
'X-CSRF-TOKEN'：$（'meta[name=“CSRF-TOKEN”]）.attr（'content'））
},
数据：dataString，
cache:false，
成功：功能（数据）{
警报（“面试安排成功”）；
}
});
});

采访日程会议

将preventdefault直接放在submit方法之后，然后进行验证或其他操作，然后提交（）；将单击事件绑定到提交按钮并执行默认操作。尝试返回false；而不是违约。