表格即使在使用後提交preventDefault

我在ajax中提交表單。我對輸入格式使用了某些驗證，比如時間和手機沒有驗證等，但它在驗證後提交表單。我確實使用了preventDefault（）來防止表單提交，但它不起作用。表格即使在使用後提交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>

來源

2017-02-14 Naveen Kumar

把你的preventDefault方法，提交後直接提交，之後或任何就開始驗證，然後提交（）; – Daniel

綁定單擊事件提交按鈕並執行preventDefault。 – pikrut

嘗試返回false;而不是preventDefault。 –

你必須阻止提交按鈕的默認行爲。與下面的代碼

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

嘗試用

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

更換您可以添加「id」屬性到您的提交按鈕，上面的代碼，而不是「類」使用英寸

來源

2017-02-14 06:55:57 pikrut

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>

來源

2017-02-14 06:59:03

表格即使在使用後提交preventDefault

回答

相關問題