2017-02-14 11 views
0

私は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> 
+0

return false

が直接あなたの提出方法の後でpreventDefaultを入れて、いくつかの条件での使用に提出しているか、どんな後に検証を行い、その後、提出します。 – Daniel

+0

イベントをバインドしてボタンを送信し、preventDefaultを実行します。 – pikrut

+0

try return false; preventDefaultの代わりに。 –

答えて

0

です。 あなたの送信ボタンに「ID」属性を追加し、コードの代わりに、「クラスの上で使用することができます

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

と交換

コードの下
$("#sche_inter_form").submit(function(e){ 

で試してみてください。

0

inputsタグを閉じる必要はありません。あなたのhtmlから</input>を削除し、e.preventDefault();を1回だけ使用してください。あなたがないようにしたい場合は、フォーム)(、

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

関連する問題