Урок #14 - Проверка полей JS + Ajax + PHP отправка
В предыдущем уроке мы с вами затронули тему обратной связи, а в этом уроке мы закончим эту тему. Мы создадим все проверки, а также осуществим отправку данных при помощи Ajax и потом PHP.
Видеоурок
Материалы для курса
Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт
Исходный код
Код для проверки формы
<!DOCTYPE html>
<html>
<head>
<?php
$title = "Обратная связь";
require_once "blocks/head.php";
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready (function () {
$("#done").click (function () {
$("#messageShow").hide ();
var name = $("#name").val ();
var email = $("#Email").val ();
var subject = $("#subject").val ();
var message = $("#message").val ();
var fail = "";
if (name.length < 3) {
fail = "Имя не меньше 3 символов";
} else if (email.split ('@').length - 1 == 0 || email.split ('.').length - 1 == 0) {
fail = "Вы ввели неоректный E-mail";
} else if (subject.length < 5) {
fail = "Тема сообщения меньше 5 символов";
} else if (message.length < 20) {
fail = "Сообщение не менее 20 символов";
}
if (fail != "") {
$('#messageShow').html (fail + "<div class='clear'><br></div>");
$('#messageShow').show ();
return false;
}
});
});
</script>
</head>
<body>
<?php require_once "blocks/header.php" ?>
<div id="wrapper">
<div id="leftCol">
<input type="text" placeholder="Имя" id="name" name="name"><br>
<input type="text" placeholder="Email" id="Email" name="Email"><br>
<input type="text" placeholder="Тема сообщения" id="subject" name="subject"><br>
<textarea name="message" id="message" placeholder="Введите сюда ваше сообщение"></textarea><br>
<div id="messageShow"></div>
<input type="button" name="done" id="done" value="Отправить">
</div>
<?php require_once "blocks/rightCol.php" ?>
</div>
<?php require_once "blocks/footer.php" ?>
</body>
</html>Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
