私は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>
return false
が直接あなたの提出方法の後でpreventDefaultを入れて、いくつかの条件での使用に提出しているか、どんな後に検証を行い、その後、提出します。 – Daniel
イベントをバインドしてボタンを送信し、preventDefaultを実行します。 – pikrut
try return false; preventDefaultの代わりに。 –