jqueryを使用してajaxでフォームを送信し、bootstrapValidatorで検証しようとしています。フォームの送信は、検証しないと機能しますが、成功メッセージが表示されません。bootsrapvalidator フォームを使用すると送信されますが、挿入ページに移動します。(ajax は機能しません) priventdefault(); を使用しました。それを停止しますが、フォームの送信が停止しました。どちらの場合も、成功または失敗のメッセージを取得できません。
私がしたいこと
送信が成功した場合は成功メッセージ、エラーが発生した場合はエラー メッセージ
Ajax jquery による送信
ブートストラップ検証を使用した検証 送信後にフォームをクリアする
コードを見て、どこが間違っているのか教えてください
編集後
ここにもフォームを投稿しています。フォームを見てください
<p id="message_show">hiii</p>
<form class="form-horizontal" id="achievements-form" method="post" action="/InsertAchievements">
<fieldset>
<!-- Form Name -->
<legend>Achievements</legend>
<div class="form-container box">
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="title">Title</label>
<div class="col-md-7">
<input id="title" name="title" type="text" placeholder="title"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="example1">Date</label>
<div class="col-md-7">
<input type="date" placeholder="date" name="date" id="example1" required class="form-control">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="textinput">Content</label>
<div class="col-md-7">
<textarea id="textinput" name="content" type="text" placeholder="Content"
class="form-control input-md" rows="7" required></textarea>
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-2 control-label" for="update"></label>
<div class="col-md-8">
<button id="update" name="update" type="submit" class="btn btn-success">Update</button>
</div>
</div>
</div>
</fieldset>
</form>
<script>
$.noConflict();
console.log("achivements validation");
$("#update").click(function (event) {
event.preventDefault();
console.log("update button clicked");
var validator = $("#achievements-form").bootstrapValidator({
live: 'enabled',
message: 'This value is not valid',
submitButton: '$achievements-form button[type="submit]',
submitHandler: function (validatior, form, submitButton) {
$.ajax({
url: "/InsertAchievements",
method: "post",
data: $('#achievements-form').serialize(),
dataType: "String",
success: function (data) {
$('#message_show').text("success");
$("#email-form").data('bootstrapValidator').resetForm();
$("#achievements-form")[0].reset();
}
});
return false;
},
fields: {
title: {
validators: {
notEmpty: {
message: 'Title is required'
},
stringLength: {
min: 6,
max: 30,
message: 'Must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[A-Za-z0-9 ]*[A-Za-z0-9][A-Za-z0-9 ]*$/,
message: 'The title can only consist of alphabetical number and spaces'
}
}
},
date: {
validators: {
notEmpty: {
message: 'Date is required'
}
}
},
content: {
validators: {
notEmpty: {
message: 'Content is required'
},
stringLength: {
min: 1,
max: 500,
message: 'Must be more than 1 and less than 500 characters long'
},
regexp: {
regexp: /^[A-Za-z0-9 ]*[A-Za-z0-9][A-Za-z0-9 ]*$/,
message: 'The title can only consist of alphabetical number and spaces'
}
}
}
}
});
});
});