Как проверить форму, а затем выдать пост HTTP-запрос jQuery
Я пытаюсь подтвердить свою форму. Например, когда пользователь не вводил никаких значений или пробелов, плагин проверки jQuery обнаружит ошибку и отобразит сообщение об ошибке под названием "пожалуйста, заполните поле" или "не оставляйте пробелов". Если проверка правильна, с помощью jQuery ajax будет отправлен почтовый HTTP-запрос для отправки информации на сервер. В настоящее время я могу проверить, но не могу выполнить запрос HTTP после публикации, когда пользователь нажимает кнопку Отправить. Вот мои коды
<script>
function WebFormData(inLessonName) {
this.lessonName = inLessonName;
}
$('#dataForm').validate({
rules: {
lessonName: {
required: true,
nowhitespace: true
}
},
submitHandler: function (form) {
var collectedLessonName = $('#lessonName').val();
var webFormData = new WebFormData(collectedLessonName);
var webFormDataInString = JSON.stringify(webFormData);
$saveSessionSynopsisDataHandler = $.ajax({
method: 'POST',
url: '/API/Session',
dataType: 'json',
contentType: 'application/json;',
data: "'" + webFormDataInString + "'"
});
}
});
</script>
<form id="dataForm" role="form" class="form-horizontal">
<label class="control-label col-md-4" for="lessonName">lesson name</label>
<input type="text" id="lessonName" name="lessonName" class="form-control font-bold"
maxlength="100" placeholder="lessonName" value="" />
<div class="col-md-10">
<div class="pull-right">
<input type="button" class="btn btn-primary" value="Save" id="saveButton" />
</div>
</div>
</form>
1 ответ
Использовать onsubmit
метод для form
это вызывает функцию. Если он вернется false
тогда он не подчинится, если true
, форма отправляет. Просто добавьте в мой пример ваш jquery
function validation(){
// check whatever you want to check here, return false if there is an error like white space
if (document.getElementById("name").value.length < 1) {
window.alert("fill the field");
return false; // form not submited
} else {
// if everything is fine then you can submit
return true;
}
}
<form onsubmit="return validation()">
Name: <input type="text" name="fname" id="name">
<input type="submit" value="Submit">
</form>