Привет всем.
В общем: есть форма, на форме несколько полей ввода, все с атрибутами required. JS-скрипт с помощью ajax делает запрос на сервер, в соответствии с результатом говорит, удачно ли прошел запрос, или же нет. Проблема в том, что скрипт срабатывает минуя валидацию (то есть атрибут required у полей формы).
Код HTML-страницы:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple page</title>
<link rel="stylesheet" href="styles/cssreset.css">
<link rel="stylesheet" href="styles/style.css">
<script src="scripts/jquery-1.12.3.min.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<div id="feedback">
<h1 id="test">Оставить отзыв</h1>
<hr>
<form id="feedback_form">
<div class="row clearfix">
<label for="name">Ваше имя: </label>
<input type="text" id="name" name="name" required="required">
</div>
<div class="row clearfix">
<label for="surname">Ваша фамилия:</label>
<input required="required" type="text" id="surname" name="surname">
</div>
<div class="row clearfix">
<label for="email">Ваш email:</label>
<input required="required" type="email" id="email" name="email">
</div>
<label for="message">Ваше сообщение:</label>
<textarea name="message" id="message" required="required"></textarea>
<div class="row clearfix">
<p></p>
<input type="submit" id="btnSubmit" value="Отправить">
</div>
</form>
</div>
</body>
</html>
$(document).ready(function(){
$("#btnSubmit").click(function(e) {
// e.preventDefault();
$.ajax({
type: "POST",
url: "../sendmail.php",
data: $("#feedback_form").serialize(),
complete: function(transport) {
if (transport.status == 200) {
$("div.row:last-child p").addClass("success").html("Отзыв успешно отправлен");
} else {
$("div.row:last-child p").addClass("error").html("Ошибка, отзыв не отправлен");
}
}
});
});
})