Формы есть почти на каждом сайте:
- форма обратной связи
- регистрация
- вход
- подписка
И если форма не проверяет данные, пользователь:
- отправляет пустые поля
- вводит что угодно
- получает ошибку
- уходит с сайта
В этой статье разберём валидацию форм на чистом JavaScript, без библиотек и сложных терминов.
Что такое валидация формы простыми словами
Валидация — это проверка данных, которые ввёл пользователь.
Например:
- поле не должно быть пустым
- email должен быть похож на email
- пароль не слишком короткий
👉 Проверять форму нужно до отправки.
Минимальный пример формы
Начнём с самой простой формы, чтобы понять принцип.
HTML
У нас есть:
- поле ввода имени
- кнопка отправки
Первая проверка: пустое поле
JavaScript
Что здесь происходит
1️⃣ мы получаем кнопку и input
2️⃣ отслеживаем клик
3️⃣ проверяем значение поля
4️⃣ если поле пустое — показываем сообщение
Это базовая логика, которая используется почти везде.
Улучшаем пример: несколько проверок
Добавим ещё одну проверку — длину имени.
Почему используется return:
- чтобы остановить выполнение кода
- чтобы не проверять дальше
Проверка email (очень часто используется)
HTML
JavaScript
Это простой пример, не идеальный, но понятный для новичка.
Как НЕ стоит делать
❌ отправлять форму без проверки
❌ писать сложный код сразу
❌ использовать библиотеки, не понимая основ
Что важно запомнить
✔ валидация нужна всегда
✔ начинай с простых проверок
✔ делай сообщения понятными
✔ думай о пользователе
Итог
Если ты умеешь:
- проверять пустые поля
- проверять длину
- проверять email
— ты уже можешь делать нормальные формы для сайтов.
👉 В следующей статье разберём модальные окна с анимацией.