即使使用了preventDefault之后，表单仍被提交

Question

I am submitting a form in ajax. I used certain validation for input format like time and phone no validation etc. But it submits the form after validation. I did use preventDefault() to prevent form submission but it doesn't work.

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

This is my form

<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

You have to prevent default behavior of submit button. Try with below code

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

replace with

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

You can add 'id' attribute to your submit button and use in above code instead of 'class'.

Answer 2

inputs don't need closing tag. Remove </input> from your html and use e.preventDefault(); only once. If you want to prevent form submit in some condition use 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>