2. Валидация формы обратной связи

Код:

javascript

Copy

Download

form.addEventListener('submit', function(e) {

e.preventDefault(); // Отменяет стандартную отправку формы

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

// Проверка имени

if (nameInput.value.trim() === '') {

showError('name-error', 'Пожалуйста, введите ваше имя');

isValid = false;

}

// Проверка телефона (только цифры, скобки, пробелы)

phoneInput.value = phoneInput.value.replace(/[^0-9\s+\-()]/g, '');

// Проверка email (регулярное выражение)

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(emailInput.value.trim())) {

showError('email-error', 'Введите корректный email');

isValid = false;

}

// Если валидация пройдена — форма сбрасывается

if (isValid) form.reset();

});

Как работает:

1. Запрет стандартной отправки (e.preventDefault()).

2. Валидация полей:

   • Имя: проверка на пустоту и минимальную длину (2 символа).

   • Телефон: удаляет все символы, кроме цифр, пробелов, +, -, скобок.

   • Email: проверка формата через регулярное выражение.

3. Вывод ошибок под полями через showError().

4. Сброс формы при успешной валидации.

3. Мобильное меню (бургер)

Код:

javascript

Copy

Download

const menuToggle = document.querySelector('.mobile-menu-toggle');

const navLinks = document.getElementById('nav-links');

menuToggle.addEventListener('click', function() {

// Переключаем класс 'active' для отображения/скрытия меню

navLinks.classList.toggle('active');

// Анимация иконки бургера

const spans = menuToggle.querySelectorAll('span');

if (navLinks.classList.contains('active')) {

spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)';

spans[1].style.opacity = '0';

spans[2].style.transform = 'rotate(-45deg) translate(7px, -6px)';

} else {

spans.forEach(span => span.style = ''); // Сброс анимации

}

});

// Закрытие меню при клике вне его

document.addEventListener('click', function(event) {

if (!event.target.closest('.nav-links') && !event.target.closest('.mobile-menu-toggle')) {

navLinks.classList.remove('active');

}

});

Как работает:

1. При клике на бургер-иконку:

   • Меню появляется/исчезает (через добавление/удаление класса .active).

   • Иконка анимируется в крестик (поворот линий).

2. При клике вне меню — оно закрывается.

Дополнительные функции

Вспомогательные методы:

• showError(id, message) — показывает сообщение об ошибке под полем.

• resetErrors() — скрывает все ошибки и сбрасывает стили полей.

• isValidEmail() / isValidPhone() — проверяют корректность данных.

Обработчики событий:

• DOMContentLoaded — код выполняется после полной загрузки DOM.

• input (для телефона) — фильтрация вводимых символов в реальном времени.

Итог: что делает JavaScript на странице?

1. Галерея проектов: → Плавная прокрутка фотографий кнопками.

2. Форма обратной связи: → Валидация данных перед отправкой. → Подсветка ошибок.

3. Мобильное меню: → Анимация бургер-иконки. → Удобное управление на маленьких экранах.