3 способа валидации форм — от простого к сложному

Валидация формы — проверка данных, которые ввёл пользователь. С этой задачей сталкиваются многие начинающие фронтенд-разработчики. В статье мы расскажем о том, как работает валидация и как реализовать её тремя разными способами.

Для чего нужна валидация?

Сегодня сложно представить сайт без формы, куда пользователь вводит личные данные. Подписка на рассылку, регистрация на вебинар, покупка товаров и билетов — во всех случаях важна валидация формы.

Этот процесс проверяет данные от пользователя на корректность и предотвращает потенциальные ошибки — это нужно как для владельца сайта, так и для самого пользователя.

В статье мы рассмотрим три основных способа валидации: 

• с помощью CSS;
• JavaScript;
• на стороне сервера.

Разберём, как каждый из этих методов работает и какие проблемы решает.

Как работает валидация форм

Основная цель валидации — предотвратить ввод некорректных данных пользователем. Например, чтобы человек просто не смог указать дату бронирования отеля в неверном формате — и не испортил себе отпуск.

Валидация на стороне клиента выполняется в браузере — данные проверяются до того, как они будут отправлены на сервер. Это уменьшает количество лишних запросов на сервер и сокращает время их обработки. Так, например, браузер выдаст сообщение с просьбой придумать более сложный пароль.

Следующий этап — валидация на стороне сервера. Она используется для проверки данных, которые могут быть изменены или подделаны на стороне клиента. Сервер может предупредить пользователя об ошибках и выдать сообщение о необходимости исправить данные.

Вариантов использования тут ещё больше: подтверждение данных карты во время оплаты, уникальность имени пользователя, проверка возраста 18+ и многое другое.

В чём разница между валидацией на стороне клиента и сервера

Разберём особенности этих вариантов.

Валидация на стороне клиента:

• Происходит в браузере до отправки формы на сервер.
• Обеспечивает быструю обратную связь для пользователя. Например, так можно предупредить о том, что подтверждение пароля не совпадает.
• Улучшает пользовательский опыт, предотвращая отправку некорректных данных. Например, не получится отправить на сервер форму регистрации с пустыми полями.
• Не является полностью безопасной. Пользователь может отключить JavaScript в своём браузере и отправить некорректные данные или использовать программы, которые автоматически заполняют форму, игнорируя проверки на стороне клиента.

Валидация на стороне сервера:

• Происходит на сервере после отправки формы пользователем.
• Использует серверный язык программирования для проверки данных: PHP, Python, Ruby или Java.
• Делает процесс безопасным, так как проверка данных выполняется на сервере. Злоумышленники не могут обойти этот процесс так же легко, как клиентскую валидацию. 
• Может использовать серверные фреймворки и библиотеки для определения правил валидации.
• Немного замедляет обратную связь для пользователя, так как требуется время на обработку запроса и возвращение ответа сервером. 

Совет: используйте комбинацию валидации на стороне клиента и сервера для обеспечения лучшей защиты и удобства пользователей.

Способы валидации форм с помощью CSS

CSS задаёт внешний вид элементов на веб-странице и сам по себе не может проверять данные в форме. Тем не менее CSS удобно сочетать с HTML5-атрибутами, чтобы визуально отображать результат валидации для элементов формы.

Разберём на примерах.

Проверка обязательных полей

Вы можете использовать атрибут HTML «required», чтобы обязать пользователя заполнить конкретное поле в форме. Также вы можете использовать псевдокласс CSS «:invalid», чтобы указать на ошибку при попытке отправки формы без заполнения обязательных полей.

			<form>
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <input type="submit" value="Отправить">
</form>

<style>
  input:invalid {
    border: 2px solid red;
  }
</style>
		

В этом примере мы используем атрибут «required» для полей «name» и «email». Если пользователь попытается отправить форму без заполнения этих полей, они будут выделены красной рамкой, потому что мы установили CSS-правило, которое применяется к псевдоклассу «:invalid».

Ограничение на количество символов

Можно использовать атрибут «maxlength» в HTML для ограничения количества символов и применить CSS для стилизации элемента формы при достижении лимита. Также можно использовать CSS-псевдокласс «:valid», чтобы указать на успешную проверку.

Пример:

			<form>
  <input type="text" name="name" maxlength="10">
  <input type="email" name="email">
  <input type="submit" value="Отправить">
</form>

<style>
  input:valid {
    border: 2px solid green;
  }
</style>
		

Важно: CSS не может выполнять сложные проверки данных для полноценной валидации форм.

Например, проверить, является ли введённое значение номером телефона или соответствует ли оно заданному формату. Кроме того, пользователь может легко изменить или удалить вручную CSS-код, чтобы отправить неправильные данные на сервер.

В целом CSS-валидация форм — полезный инструмент для проверки корректности данных на стороне клиента. Но она не может полностью заменить полноценную валидацию на стороне сервера и использование других инструментов — JavaScript или серверных языков программирования.

Способы валидации форм с помощью JavaScript

JavaScript позволяет создавать сложные правила проверки и контролировать поведение формы в режиме реального времени. Разберём на конкретных примерах.

Проверка на пустое значение

Один из самых простых и популярных способов валидации форм. Это можно сделать с помощью метода value для элементов формы и условной конструкции if-else. Например, чтобы проверить, было ли введено значение в поле ввода, можно использовать следующий код:

			let inputField = document.getElementById("myInput");
if (inputField.value === "") {
  alert("Поле ввода не должно быть пустым");
}
		

Регулярные выражения

Мощный инструмент для валидации форм. Регулярные выражения позволяют проверять вводимые данные на соответствие заданному формату.

Например, чтобы проверить, соответствует ли введённый текст формату email, можно использовать следующий код:

			let emailField = document.getElementById("myEmail");
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(emailField.value)) {
  alert("Некорректный email-адрес");
}
		

Подробнее регулярные выражения мы уже разбирали в другой статье.

Проверка числовых значений

JavaScript также позволяет создавать пользовательские функции для валидации форм. Это может быть полезно для сложных проверок, которые нельзя выполнить с помощью других инструментов. 

Например, чтобы проверить, что введённое число больше 10 и меньше 100, можно создать пользовательскую функцию checkNumber и использовать её следующим образом:

			function checkNumber(num) {
  // Проверяем, находится ли число в диапазоне от 10 до 100
  if (num < 10 || num > 100) {
    return false;
  }
  return true;
}
let numberField = document.getElementById("myNumber");
if (!checkNumber(numberField.value)) {
  alert("Число должно быть больше 10 и меньше 100");
}
		

Валидация форм на стороне сервера

На стороне сервера валидация форм используется для дополнительной защиты от ошибок ввода, которые могут привести к нежелательным последствиям для пользователей или сайта в целом. 

Например, пользователь может попытаться ввести некорректный адрес электронной почты, и если эта ошибка не будет обнаружена, то письмо, отправленное на этот адрес, не будет доставлено.

Реализация валидации на стороне сервера обычно осуществляется с помощью серверных языков программирования, таких как PHP, Python, Ruby, Java и других.

Приведём примеры валидации на PHP. 

Проверка обязательных полей

Для проверки обязательных полей можно использовать следующий код:

			if (empty($_POST['name'])) {
    $errors[] = 'Поле "Имя" обязательно для заполнения';
}
if (empty($_POST['email'])) {
    $errors[] = 'Поле "Email" обязательно для заполнения';
}
if (empty($_POST['message'])) {
    $errors[] = 'Поле "Сообщение" обязательно для заполнения';
}

// Если есть ошибки, выводим их пользователю
if (!empty($errors)) {
    foreach ($errors as $error) {
        echo '<p>' . $error . '</p>';
    }
    exit;
}
		

В этом примере мы проверяем, были ли заполнены обязательные поля формы (поля «Имя», «Email» и «Сообщение»). Если какое-то обязательное поле не заполнено, добавляем ошибку в массив $errors. Затем выводим все ошибки пользователю, если они есть.

Проверка правильности формата email

Пример:

			if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
    $errors[] = 'Поле "Email" должно содержать правильный email-адрес';
}

// Если есть ошибки, выводим их пользователю
if (!empty($errors)) {
    foreach ($errors as $error) {
        echo '<p>' . $error . '</p>';
    }
    exit;
}
		

В этом примере мы используем функцию filter_var() с параметром FILTER_VALIDATE_EMAIL, чтобы проверить, соответствует ли введённый email правильному формату. Если email не соответствует формату, добавляем ошибку в массив $errors. Затем выводим все ошибки пользователю, если они есть.

Проверка уникальности имени пользователя

Проверяем, есть ли уже пользователь с таким именем:

			$stmt = $pdo->prepare("SELECT COUNT(*) FROM users WHERE username = ?");
$stmt->execute([$_POST['username']]);
if ($stmt->fetchColumn() > 0) {
    $errors[] = 'Пользователь с таким именем уже существует';
}

// Если есть ошибки, выводим их пользователю
if (!empty($errors)) {
    foreach ($errors as $error) {
        echo '<p>' . $error . '</p>';
    }
    exit;
}
		

В этом примере мы используем SQL-запрос для проверки, есть ли в базе уже пользователь с введённым именем. Для этого используем подготовленное выражение prepare() и метод execute(), чтобы передать параметр (имя пользователя) в запрос.

Затем используем метод fetchColumn() для получения количества строк, которые соответствуют условиям запроса. Если количество строк больше 0, значит, пользователь с таким именем уже есть, и мы добавляем ошибку в массив $errors.

После выводим все ошибки пользователю, если они есть.

Валидация форм на стороне сервера важна, потому что позволяет защитить сайт от злонамеренных действий пользователей, таких как ввод некорректных данных, SQL-инъекций и других атак. Проводить её уместно почти всегда, даже если вы уже проводили валидацию на стороне клиента с помощью JavaScript или CSS.

Как сочетать несколько способов валидации?

Использование одного из методов не гарантирует 100% защиту от ошибок, поэтому лучшей практикой считают их совместное использование.

Например, можно использовать валидацию на стороне клиента для улучшения пользовательского интерфейса и быстрой обратной связи с пользователем, а также валидацию на стороне сервера для защиты от злоумышленников и обеспечения безопасности приложения.

Пример комбинирования способов валидации:

			// валидация на стороне клиента
function validateForm() {
  let name = document.forms["myForm"]["name"].value;
  let email = document.forms["myForm"]["email"].value;
  if (name === "" || email === "") {
    alert("Заполните все поля!");
    return false;
  }
  if (!validateEmail(email)) {
    alert("Введите корректный email-адрес!");
    return false;
  }
  // дополнительная проверка на стороне клиента
  if (name.length < 3) {
    alert("Имя должно содержать не менее 3 символов!");
    return false;
  }
  return true;
}
// валидация на стороне сервера
app.post('/submit', function(req, res) {
  let name = req.body.name;
  let email = req.body.email;
  // проверка на уникальность email-адреса в базе данных
  User.findOne({ email: email }, function(err, user) {
    if (err) throw err;
    if (user) {
      res.send("Email-адрес уже занят!");
    } else {
      let newUser = new User({
        name: name,
        email: email
      });
      newUser.save(function(err) {
        if (err) throw err;
        res.send("Форма успешно отправлена!");
      });
    }
  });
});
		

В данном примере валидация на стороне клиента проверяет, заполнены ли обязательные поля формы, корректен ли введённый email-адрес, а также проводится дополнительная проверка на длину имени. Валидация на стороне сервера проверяет уникальность email-адреса в базе данных и сохраняет данные пользователя, если все проверки пройдены успешно.

Заключение

Мы рассмотрели различные способы валидации форм и возможность использования нескольких способов, а также объяснили, когда это необходимо.

✔ Для дальнейшего освоения темы рекомендуем больше изучать серверные технологии (PHP, Python, Ruby, Java) и фреймворки (например, Laravel, Django, Ruby on Rails, Spring).

✔ Дополнительно изучите библиотеки, которые упрощают реализацию валидации форм. Например, jQuery Validation, VeeValidate, Joi и другие.

✔ При реализации валидации формы учитывайте особенности проекта и выбирайте метод, наиболее эффективный и удобный в конкретной ситуации.