JavaScript валидация форм: лучшие приемы для любого сайта

Пройдите тест, узнайте какой профессии подходите

Сколько вам лет

До 18

От 18 до 24

От 25 до 34

От 35 до 44

От 45 до 49

От 50 до 54

Больше 55

Для кого эта статья:

Веб-разработчики, желающие улучшить свои навыки валидации форм на JavaScript
Студенты курсов веб-разработки, изучающие клиентскую валидацию
UX-дизайнеры, стремящиеся понять важность валидации форм для улучшения пользовательского опыта
Формы – кровеносная система современного веба, позволяющая собирать данные пользователей и выстраивать коммуникацию. Но что делать, если пользователь вводит email без символа '@', оставляет пустыми обязательные поля или вписывает телефон в неправильном формате? 🧐 Клиентская валидация – настоящая волшебная палочка разработчика, предотвращающая хаос неверных данных и улучшающая пользовательский опыт. В этой пошаговой инструкции я расскажу, как создать надежную валидацию формы на JavaScript без единой строчки серверного кода.

Правильная валидация форм на стороне клиента – один из ключевых навыков современного веб-разработчика. На курсе веб-разработки от Skypro этому уделяется особое внимание. Студенты не только осваивают базовые техники валидации с JavaScript, но и погружаются в продвинутые практики, включая асинхронные проверки и интеграцию с API. После обучения вы сможете создавать интуитивно понятные формы, значительно повышающие конверсию сайтов.

Основы создания сайта с клиентской валидацией формы

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

Давайте сначала разберемся с ключевыми компонентами, которые нам потребуются для создания формы с валидацией:

HTML-структура формы с соответствующими атрибутами
CSS для стилизации формы и индикации ошибок
JavaScript-код для проверки введенных данных
Механизм обратной связи для отображения результатов проверки

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

Тип валидации	Описание	Пример использования
Обязательные поля	Проверка заполнения необходимых полей	Имя, Email, Согласие с условиями
Формат данных	Соответствие данных определенному шаблону	Email, телефон, дата, URL
Длина ввода	Проверка количества символов	Пароль (мин. 8 символов), имя пользователя
Диапазон значений	Проверка числовых значений	Возраст (18-100), количество товаров (1-99)

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

Алексей Петров, Lead Frontend Developer

Когда я только начинал карьеру, мой первый серьезный проект провалился из-за отсутствия валидации. Клиент заказал форму регистрации для своего стартапа. Я сделал красивый дизайн, но пренебрег проверкой данных. В первую неделю после запуска база данных наполнилась невалидными email-адресами, а пользователи жаловались на отсутствие подтверждений. Пришлось срочно внедрять валидацию и чистить базу. С тех пор я всегда следую правилу: "Никогда не доверяй данным пользователя". Клиентская валидация стала моим стандартом для любого проекта, даже самого простого.

Структура HTML-формы и правила проверки данных

Начнем с создания базовой структуры HTML-формы. Правильная разметка — фундамент успешной валидации. Современный HTML5 предоставляет множество встроенных атрибутов для базовой валидации, которые мы можем усилить с помощью JavaScript. 🏗️

Вот пример формы регистрации с базовыми атрибутами валидации:

HTML

Скопировать код

<form id="registrationForm" novalidate>
<div class="form-group">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" required minlength="3" maxlength="20">
<span class="error" id="username-error"></span>
</div>

<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<span class="error" id="email-error"></span>
</div>

<div class="form-group">
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required minlength="8">
<span class="error" id="password-error"></span>
</div>

<div class="form-group">
<label for="confirmPassword">Подтвердите пароль:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
<span class="error" id="confirm-password-error"></span>
</div>

<button type="submit">Зарегистрироваться</button>
</form>

Обратите внимание на атрибут novalidate в теге form. Он отключает встроенную браузерную валидацию, позволяя нам полностью контролировать процесс с помощью JavaScript. Это даёт возможность реализовать более гибкую и эстетически приятную обратную связь.

Для каждого поля формы определим правила проверки:

Поле	Правила валидации	HTML-атрибуты
Имя пользователя	Обязательное поле, 3-20 символов	required, minlength="3", maxlength="20"
Email	Обязательное поле, формат email	required, type="email"
Пароль	Обязательное поле, минимум 8 символов	required, minlength="8"
Подтверждение пароля	Обязательное поле, должно совпадать с паролем	required

Дополнительно структурируем наш CSS для визуализации состояний формы:

CSS

Скопировать код

.form-group {
margin-bottom: 15px;
position: relative;
}

input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

input:focus {
outline: none;
border-color: #4a90e2;
}

input.valid {
border-color: #2ecc71;
background-color: #f0fff0;
}

input.invalid {
border-color: #e74c3c;
background-color: #fff0f0;
}

.error {
color: #e74c3c;
font-size: 12px;
margin-top: 5px;
display: block;
}

Эти стили позволят визуально отображать статус валидации полей, делая интерфейс более интуитивным для пользователя. Теперь пользователь сразу будет видеть, какие поля заполнены корректно (зеленая рамка), а какие требуют внимания (красная рамка).

JavaScript для валидации полей формы: практический код

Переходим к самому интересному – реализации валидации с помощью JavaScript. Наш подход будет основан на создании функций проверки для каждого типа поля и объединении их в единую систему валидации. 🧩

Начнем с базовой структуры скрипта:

Скопировать код

document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('registrationForm');

// Получаем ссылки на все поля формы
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');

// Получаем ссылки на элементы для отображения ошибок
const usernameError = document.getElementById('username-error');
const emailError = document.getElementById('email-error');
const passwordError = document.getElementById('password-error');
const confirmPasswordError = document.getElementById('confirm-password-error');

// Добавляем обработчик события отправки формы
form.addEventListener('submit', function(event) {
// Отменяем стандартное поведение формы
event.preventDefault();

// Сбрасываем предыдущие ошибки
resetErrors();

// Валидируем все поля
let isValid = validateUsername() &
validateEmail() &
validatePassword() &
validateConfirmPassword();

// Если все проверки пройдены, отправляем форму
if (isValid) {
console.log('Форма отправлена успешно');
form.submit();
}
});

// Функции валидации для каждого поля
function validateUsername() {
if (username.value.trim() === '') {
showError(username, usernameError, 'Имя пользователя обязательно');
return false;
} else if (username.value.length < 3) {
showError(username, usernameError, 'Имя пользователя должно содержать минимум 3 символа');
return false;
} else if (username.value.length > 20) {
showError(username, usernameError, 'Имя пользователя должно содержать максимум 20 символов');
return false;
}

showSuccess(username);
return true;
}

function validateEmail() {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (email.value.trim() === '') {
showError(email, emailError, 'Email обязателен');
return false;
} else if (!emailRegex.test(email.value)) {
showError(email, emailError, 'Введите корректный email');
return false;
}

showSuccess(email);
return true;
}

function validatePassword() {
if (password.value === '') {
showError(password, passwordError, 'Пароль обязателен');
return false;
} else if (password.value.length < 8) {
showError(password, passwordError, 'Пароль должен содержать минимум 8 символов');
return false;
}

showSuccess(password);
return true;
}

function validateConfirmPassword() {
if (confirmPassword.value === '') {
showError(confirmPassword, confirmPasswordError, 'Подтверждение пароля обязательно');
return false;
} else if (confirmPassword.value !== password.value) {
showError(confirmPassword, confirmPasswordError, 'Пароли не совпадают');
return false;
}

showSuccess(confirmPassword);
return true;
}

// Вспомогательные функции для отображения ошибок и успеха
function showError(input, errorElement, message) {
input.classList.remove('valid');
input.classList.add('invalid');
errorElement.textContent = message;
}

function showSuccess(input) {
input.classList.remove('invalid');
input.classList.add('valid');
}

function resetErrors() {
// Сбрасываем все сообщения об ошибках
usernameError.textContent = '';
emailError.textContent = '';
passwordError.textContent = '';
confirmPasswordError.textContent = '';

// Удаляем классы валидности
[username, email, password, confirmPassword].forEach(input => {
input.classList.remove('invalid');
input.classList.remove('valid');
});
}

// Добавляем валидацию при потере фокуса (для лучшего UX)
username.addEventListener('blur', validateUsername);
email.addEventListener('blur', validateEmail);
password.addEventListener('blur', validatePassword);
confirmPassword.addEventListener('blur', validateConfirmPassword);
});

Этот JavaScript-код реализует полноценную валидацию нашей формы регистрации. Давайте разберем ключевые моменты:

Используем событие DOMContentLoaded, чтобы гарантировать загрузку DOM перед выполнением скрипта
Для каждого поля создаем отдельную функцию валидации, что обеспечивает модульность и читаемость кода
Применяем регулярное выражение для проверки email-адреса
Реализуем валидацию не только при отправке формы, но и при потере фокуса полем (событие blur)
Используем визуальные индикаторы (классы valid и invalid) для улучшения пользовательского опыта

Мария Сидорова, UX-дизайнер

Работая над редизайном корпоративного портала, я столкнулась с интересной проблемой. Пользователи жаловались на форму обратной связи — многие не понимали, почему их сообщения не отправляются. Анализ показал, что старая валидация срабатывала только при нажатии кнопки "Отправить", а сообщения об ошибках были неинформативными. Мы переработали подход: добавили мгновенную валидацию при вводе, понятные подсказки под каждым полем и цветовые индикаторы. Количество успешных отправок выросло на 68%, а время заполнения формы сократилось на треть! Этот опыт убедил меня, что правильная клиентская валидация — не просто технический вопрос, а критически важный элемент пользовательского опыта.

Обработка ошибок и вывод сообщений пользователю

Правильная обратная связь — залог успеха любой формы. Недостаточно просто отклонить неверные данные; необходимо объяснить пользователю, что именно пошло не так и как это исправить. Рассмотрим подробнее, как организовать эффективную систему обработки ошибок. 🚨

Существуют различные подходы к отображению ошибок валидации:

Текстовые сообщения под полями — наиболее распространенный и понятный метод
Всплывающие подсказки (tooltips) — экономят место, но могут быть менее заметны
Цветовое выделение полей — визуальная индикация без текста
Иконки состояния — галочки для валидных полей, крестики для невалидных
Общее сообщение в верхней части формы — обычно используется в дополнение к другим методам

В нашем проекте мы уже реализовали первый и третий подходы. Давайте дополним их иконками состояния для еще более наглядной индикации:

CSS

Скопировать код

.form-group {
margin-bottom: 15px;
position: relative;
}

input {
width: 100%;
padding: 8px 30px 8px 8px; /* Увеличиваем правый padding для иконки */
border: 1px solid #ddd;
border-radius: 4px;
transition: all 0.3s;
}

input.valid {
border-color: #2ecc71;
background-color: #f0fff0;
}

input.invalid {
border-color: #e74c3c;
background-color: #fff0f0;
}

.status-icon {
position: absolute;
right: 10px;
top: 30px;
font-size: 16px;
}

.valid + .status-icon::after {
content: '✓';
color: #2ecc71;
}

.invalid + .status-icon::after {
content: '✗';
color: #e74c3c;
}

.error {
color: #e74c3c;
font-size: 12px;
margin-top: 5px;
display: block;
animation: fadeIn 0.3s;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}

Теперь добавим элемент иконки в нашу HTML-структуру:

HTML

Скопировать код

<div class="form-group">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" required minlength="3" maxlength="20">
<span class="status-icon"></span>
<span class="error" id="username-error"></span>
</div>

Аналогичные изменения нужно внести для всех полей формы. Также обновим JavaScript-код для более плавной и интерактивной обработки ошибок:

Скопировать код

function showError(input, errorElement, message) {
input.classList.remove('valid');
input.classList.add('invalid');
errorElement.textContent = '';

// Добавляем анимированное появление сообщения об ошибке
setTimeout(function() {
errorElement.textContent = message;
}, 10);
}

function showSuccess(input) {
input.classList.remove('invalid');
input.classList.add('valid');
}

Усовершенствуем валидацию, добавив проверку в реальном времени:

Скопировать код

// Добавляем валидацию при вводе для улучшения UX
username.addEventListener('input', function() {
if (this.value.length >= 3) {
validateUsername();
}
});

email.addEventListener('input', debounce(function() {
if (this.value.length > 5 && this.value.includes('@')) {
validateEmail();
}
}, 500));

password.addEventListener('input', function() {
if (this.value.length >= 8) {
validatePassword();

// Если поле подтверждения пароля уже заполнено, проверяем его
if (confirmPassword.value !== '') {
validateConfirmPassword();
}
}
});

confirmPassword.addEventListener('input', function() {
if (this.value !== '' && password.value !== '') {
validateConfirmPassword();
}
});

// Функция для предотвращения слишком частых вызовов (debounce)
function debounce(func, delay) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, delay);
};
}

Таблица наиболее распространенных ошибок пользователей и рекомендуемых сообщений:

Тип ошибки	Рекомендуемое сообщение	Дополнительные рекомендации
Пустое обязательное поле	"Поле [название] обязательно для заполнения"	Сделайте обязательные поля визуально отличимыми (например, звездочкой)
Неверный формат email	"Пожалуйста, введите корректный email-адрес"	Можно добавить пример: "например, user@example.com"
Слишком короткий пароль	"Пароль должен содержать не менее 8 символов"	Добавьте индикатор силы пароля для визуальной обратной связи
Несовпадающие пароли	"Пароли не совпадают"	Проверяйте совпадение при вводе в реальном времени
Неверный формат телефона	"Введите телефон в формате +X XXX XXX-XX-XX"	Используйте маску ввода для направления пользователя

Усовершенствование формы: регулярные выражения и UX-приемы

Теперь, когда базовая валидация работает, давайте поднимем нашу форму на новый уровень, используя продвинутые техники валидации и UX-приемы. 🚀

Начнем с более сложных проверок с использованием регулярных выражений (RegExp). Они позволяют создавать гибкие шаблоны для проверки данных:

Скопировать код

// Расширенная валидация пароля
function validatePassword() {
const passwordValue = password.value;

if (passwordValue === '') {
showError(password, passwordError, 'Пароль обязателен');
return false;
} 

// Минимум 8 символов
if (passwordValue.length < 8) {
showError(password, passwordError, 'Пароль должен содержать минимум 8 символов');
return false;
}

// Проверка наличия цифры
if (!/\d/.test(passwordValue)) {
showError(password, passwordError, 'Пароль должен содержать хотя бы одну цифру');
return false;
}

// Проверка наличия заглавной буквы
if (!/[A-Z]/.test(passwordValue)) {
showError(password, passwordError, 'Пароль должен содержать хотя бы одну заглавную букву');
return false;
}

// Проверка наличия специального символа
if (!/[!@#$%^&*]/.test(passwordValue)) {
showError(password, passwordError, 'Пароль должен содержать хотя бы один спецсимвол (!@#$%^&*)');
return false;
}

showSuccess(password);
return true;
}

// Более строгая проверка email с учетом различных доменов
function validateEmail() {
// RFC 5322 совместимое регулярное выражение для email
const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

if (email.value.trim() === '') {
showError(email, emailError, 'Email обязателен');
return false;
} else if (!emailRegex.test(email.value.toLowerCase())) {
showError(email, emailError, 'Введите корректный email-адрес');
return false;
}

showSuccess(email);
return true;
}

Теперь реализуем индикатор силы пароля для улучшения пользовательского опыта:

HTML

Скопировать код

<!-- HTML для индикатора силы пароля -->
<div class="form-group">
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required>
<div class="password-strength">
<div class="strength-meter">
<div class="strength-meter-fill" id="strength-meter-fill"></div>
</div>
<span id="strength-text">Сила пароля</span>
</div>
<span class="status-icon"></span>
<span class="error" id="password-error"></span>
</div>

CSS

Скопировать код

.password-strength {
margin-top: 5px;
}

.strength-meter {
height: 4px;
background-color: #ddd;
border-radius: 2px;
margin-bottom: 5px;
}

.strength-meter-fill {
height: 100%;
border-radius: 2px;
transition: width 0.3s, background-color 0.3s;
}

#strength-text {
font-size: 12px;
}

Скопировать код

// JavaScript для расчета и отображения силы пароля
function calculatePasswordStrength(password) {
let strength = 0;

// Если пароль пустой, возвращаем 0
if (password.length === 0) return strength;

// Длина пароля
if (password.length >= 8) strength += 1;
if (password.length >= 12) strength += 1;

// Наличие разных типов символов
if (/[0-9]/.test(password)) strength += 1;
if (/[a-z]/.test(password)) strength += 1;
if (/[A-Z]/.test(password)) strength += 1;
if (/[^0-9a-zA-Z]/.test(password)) strength += 1;

// Разнообразие символов (не только повторяющиеся)
if (password.length >= 8 && /^(?!.*(.)\1{2,})/.test(password)) strength += 1;

return Math.min(strength, 5); // Максимум 5 баллов
}

// Обновление индикатора силы пароля
password.addEventListener('input', function() {
const strengthLevel = calculatePasswordStrength(this.value);
const strengthMeterFill = document.getElementById('strength-meter-fill');
const strengthText = document.getElementById('strength-text');

// Устанавливаем ширину полосы в зависимости от силы пароля
strengthMeterFill.style.width = (strengthLevel * 20) + '%';

// Определяем цвет и текст в зависимости от силы пароля
let color, text;

switch (strengthLevel) {
case 0:
color = '#ddd';
text = 'Введите пароль';
break;
case 1:
color = '#e74c3c';
text = 'Очень слабый';
break;
case 2:
color = '#e67e22';
text = 'Слабый';
break;
case 3:
color = '#f1c40f';
text = 'Средний';
break;
case 4:
color = '#2ecc71';
text = 'Хороший';
break;
case 5:
color = '#27ae60';
text = 'Отличный';
break;
}

strengthMeterFill.style.backgroundColor = color;
strengthText.textContent = text;
strengthText.style.color = color;
});

Ещё несколько UX-приемов, которые значительно улучшат взаимодействие с формой:

Автофокус на первом поле — помогает пользователю быстрее начать заполнение формы
Маски ввода — направляют пользователя в правильном формате (особенно полезно для телефонов, дат)
Кнопка "Показать пароль" — позволяет пользователю проверить введенный пароль
Автозаполнение адресов — интеграция с геолокационными API для помощи при вводе адресов
Сохранение формы при случайном закрытии — предотвращает потерю данных

Реализуем кнопку "Показать пароль" как пример:

HTML

Скопировать код

<!-- HTML-код -->
<div class="form-group">
<label for="password">Пароль:</label>
<div class="password-container">
<input type="password" id="password" name="password" required>
<button type="button" id="toggle-password" class="toggle-password">👁️</button>
</div>
...
</div>

CSS

Скопировать код

.password-container {
position: relative;
}

.toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 16px;
padding: 0;
}

Скопировать код

document.getElementById('toggle-password').addEventListener('click', function() {
const passwordInput = document.getElementById('password');

// Переключаем тип поля между "password" и "text"
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
this.textContent = '👁️‍🗨️';
} else {
passwordInput.type = 'password';
this.textContent = '👁️';
}
});

Работая над созданием сайтов с валидацией форм, важно найти баланс между безопасностью и удобством использования. Правильно реализованная клиентская валидация — не просто техническое решение, а ключевой элемент пользовательского опыта. Помните: каждое поле формы — это возможность либо привлечь, либо оттолкнуть пользователя. Используйте информативные сообщения об ошибках, мгновенную обратную связь и интуитивно понятные индикаторы, чтобы превратить заполнение формы из рутинной задачи в приятное взаимодействие. И главное — всегда думайте о пользователе и его потребностях, даже когда речь идёт о таком техническом аспекте, как валидация данных.

JavaScript валидация форм: лучшие приемы для любого сайта

Основы создания сайта с клиентской валидацией формы

Структура HTML-формы и правила проверки данных

JavaScript для валидации полей формы: практический код

Обработка ошибок и вывод сообщений пользователю

Усовершенствование формы: регулярные выражения и UX-приемы

Загрузка...