Валидация формы на JS и HTML 5 с выводом ошибок перед отправкой на сервер.

Автор: © web-rubik

Простейшая валидация формы на JS, PHP 7 и HTML 5.

Довольно часто на различных сайтах можно встретить проверку введённых данных в форму с выводом ошибок. Методов валидации формы существует довольно много и все они, так или иначе - работают! В этой статье я приведу пример, как осуществить валидацию формы на JS и HTML 5 перед отправкой на сервер. Ну и для полной картины осуществим валидацию формы на сервере посредствам PHP в случаи отключенного JS на стороне клиента.
К примеру, имеется форма обратной связи и нам необходимо сделать проверку введённых данных.

Вот сам HTML 5 код формы:

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
    <title>Простейшая валидация формы на JS, PHP 7 и HTML 5</title>
    <meta charset="UTF-8">
    <style> #msg, #error { color:#F00; } </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <?php if (isset($_SESSION['msg'])) { // Технические сообщения ?>
    <div id="msg"><?=$_SESSION['msg']?></div>
    <?php unset($_SESSION['msg']); } ?>
    <script> $(function hideDiv(){ $('#msg').delay(5000).fadeOut(); }) </script>
    <form method="post" action="handler/scriptHandler.php" onSubmit="return validateFeedbackForm();">
        <input id="name" name="name" type="text" placeholder="Имя *" aria-required="true"><br>
        <input id="email" name="email" type="text" placeholder="Email *" aria-required="true"><br>
        <textarea id="text" name="text" placeholder="Текст *" aria-required="true"></textarea><br>
        <input id="submit" name="submit" type="submit" value="Отправить">
    </form>
    <br>
    <div id="error" style="display:none;"></div>
    <script src="js/validate.js"></script>
</body>
</html>

В данной форме мы указали путь к PHP файлу обработчику. Установили событие onSubmit и указали название функции "return validateFeedbackForm ();", которая будет осуществлять JS проверку. Так же мы дали каждому полю и кнопке идентификатор. Вне формы будут сообщения об ошибках, которые по умолчанию отключены. JS код будет в отдельном файле, по этому пропишем к нему путь src="js/validate.js".

Вот сам JS код проверки:

function validateFeedbackForm() {
    var name = document.getElementById("name"); var name2 = name.value;
    var email = document.getElementById("email"); var email2 = email.value;
    var text = document.getElementById("text");
	
    var checkName = /^[а-яёa-z]{3,25}$/i;
    var checkEmail = /^[.a-z0-9_-]{3,20}@[.a-z0-9_-]{1,20}.[a-z]{2,4}$/i;
	
    if (!name.value && checkName.test(name2) == false) {
        name.style.border = "1px solid #E57057";
        $("#error").fadeIn(2000).text("Ошибка! Не корректно введено Имя..");
        return false; 
    } else {
        name.style.border = "1px solid #00BFF0";
        $("#error").fadeOut(200); 
    }
    if (!email.value && checkEmail.test(email2) == false) {
        email.style.border = "1px solid #E57057";
        $("#error").fadeIn(2000).text("Ошибка! Не корректно введен Email..");
        return false; 
    } else {
        email.style.border = "1px solid #00BFF0";
        $("#error").fadeOut(200); 
    }
    if (!text.value) {
        text.style.border = "1px solid #E57057";
        $("#error").fadeIn(2000).text("Ошибка! Поле текст не должно быть пустое..");
        return false;
     } else {
        text.style.border = "1px solid #00BFF0";
        $("#error").fadeOut(200); 
    }
}

Здесь мы запускаем функцию validateFeedbackForm (). Создаём переменные к каждому элементу формы и обращаемся к методу document.getElementById получая все его атрибуты по id. И создадим ещё две переменные с регулярными выражениями для проверки введённых данных
var checkName = /^[а-яёa-z]{3,25}$/i;
var checkEmail = /^[.a-z0-9_-]{3,20}@[.a-z0-9_-]{1,20}.[a-z]{2,4}$/i;
Далее мы запускаем проверку if else, где, если введённые данные не верны, мы обращаемся к атрибуту style и меняем цвет окантовки вводимого поля формы. Отменяем display:none; у div с ошибкой fadeIn(2000); и отключаем возможность перехода у кнопки return false;.
Если всё верно, меняем цвет окантовки вводимого поля и прячем ошибку fadeOut(200);.

После того как все поля проверены, элементы формы отправляются в PHP файл обработчик
action="handler/scriptHandler.php".
Далее нам необходимо сделать такую же проверку в scriptHandler.php, на случай если пользователь отключил JS в браузере.

Сам файл обработчик scriptHandler.php:

<?php // СКРИПТ ОБРАБОТЧИК
session_start();
if (isset($_POST['submit'])) {
$name = trim(strip_tags($_POST['name']));
$email = trim(strip_tags($_POST['email']));
$text = trim(strip_tags($_POST['text']));
$checkName = "/^[йцукенгшщзхъфывапролджэячсмитьбюЙЦУКЕНГШЩЗХЪФЫВАПРОЛДЖЭЯЧСМИТЬБЮa-zA-Z]{3,25}$/";
$checkEmail = "/^[.a-z0-9_-]{3,20}@[.a-z0-9_-]{1,20}.[a-z]{2,4}$/i";
if (!preg_match($checkName, $name) && !preg_match($checkEmail, $email)) {
    $_SESSION['msg'] = "<div><strong>Ошибка!</strong>Не корректно заполнены данные..</div><br>";
    header("location: ../index.php");
    exit; }
else if ($text == '') {
    $_SESSION['msg'] = "<div><strong>Ошибка!</strong> Все поля обязательны для заполнения. Будьте внимательны и указывайте только достоверные данные.</div><br>";
    header("location: ../index.php");
    exit; }
else {
    $_SESSION['msg'] = "<div><strong>Поздравляем!</strong> Текст можно отправлять на модерацию.</div><br>";
    header("location: ../index.php");
    exit; }}


header("location: ../index.php");
exit;
mysqli_close($connect);
?>

На этом у меня всё! В исходниках я положил все необходимые файлы, и если будет чего не понятно, пишите в комментариях.

Понравилось 5

Скачать исходники

Комментариев нет или Проходят модерацию

Оставить комментарий

Оставленные комментарии проверяются технической частью интернет портала Web-rubik.ru

Валидация формы на JS и HTML 5 с выводом ошибок перед отправкой на сервер.

Скачать исходники

Комментариев нет или Проходят модерацию

Оставить комментарий

←−−−

Коротко

Меню

Связь

Ещё