Показать сообщение отдельно
  #1 (permalink)  
Старый 12.05.2016, 20:41
Новичок на форуме
Отправить личное сообщение для Eschaton Посмотреть профиль Найти все сообщения от Eschaton
 
Регистрация: 07.03.2016
Сообщений: 5

Проблема с атрибутом required
Привет всем.
В общем: есть форма, на форме несколько полей ввода, все с атрибутами 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("Ошибка, отзыв не отправлен");
                }
            }
        });
    }); 
})
Ответить с цитированием