Formular wird auch nach Verwendung von preventDefault gesendet

Question

Ich übergebe ein Formular in AJAX. Ich habe eine bestimmte Validierung für das Eingabeformat wie Zeit und Telefonnummernüberprüfung usw. verwendet. Aber es reicht das Formular nach der Validierung ein. Ich habe preventDefault() verwendet, um das Senden von Formularen zu verhindern, aber es funktioniert nicht.

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

Das ist meine 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

Sie haben von Submit-Button Standardverhalten zu verhindern. Versuchen mit folgendem Code

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

ersetzen mit

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

können Sie fügen 'id' Attribut auf Ihren Absenden-Button und über Code anstelle von 'Klasse' verwenden in.

Answer 2

inputs brauchen nicht schließendes Tag. Entfernen Sie </input> von Ihrem HTML und verwenden Sie e.preventDefault(); nur einmal. Wenn Sie verhindern wollen Formular in einem gewissen Zustand Gebrauch 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>