Введение в валидацию 0:01 Видео предназначено для начинающих верстальщиков и разработчиков. Валидация помогает проверять правильность ввода данных в формах. Видео будет использовать JavaScript для демонстрации.
Подготовка кода 0:52 Создание базового HTML-файла с использованием Normalize.css и Style.css. Normalize.css нормализует теги для одинакового отображения в разных браузерах. Style.css содержит базовые стили для заголовков, ссылок и шрифтов.
Создание формы 3:01 Создание базовой формы с двумя элементами: поле ввода и кнопка. Стилизация формы с использованием классов и CSS. Центрирование формы на экране.
Стилизация полей и кнопки 6:17 Стилизация поля ввода с использованием классов и CSS. Установка минимальной и максимальной ширины поля. Добавление скругления и стилизации фокуса.
Стилизация кнопки 9:19 Стилизация кнопки с использованием классов и CSS. Добавление отступов и стилизации фона. Добавление эффектов наведения и клика.
Завершение формы 11:24 Добавление placeholder для ввода имени. Завершение создания формы для ввода имени.
Введение в валидацию 11:53 Добавление валидации для формы, чтобы при отсутствии имени появлялось сообщение. Использование библиотеки Just Validate. Подключение библиотеки через CDN.
Подключение библиотеки 12:51 Переход на сайт Just Validate и изучение документации. Подключение библиотеки через CDN, копирование пути и вставка в HTML. Проверка подключения библиотеки в браузере.
Настройка формы 14:47 Создание отдельного скрипта для валидации. Подключение скрипта и отключение автозаполнения. Добавление атрибутов name и id для полей формы.
Создание валидатора 17:42 Создание переменной-селектора для валидации. Подключение валидатора к форме по ID. Проверка отсутствия ошибок в консоли.
Настройка проверки 19:32 Добавление поля проверки для имени. Указание ID поля и правила проверки на ввод. Проверка наличия значения в поле.
Отображение ошибок 22:14 Настройка отображения ошибок под полем ввода. Создание div для отображения ошибок. Настройка текста ошибки на русском языке.
Стилизация и доработка 24:59 Детализация стилей для поля ввода и ошибок. Изменение цвета ошибок на синий. Завершение доработки и тестирование.
Валидация поля имени 25:41 Добавлена валидация поля имени. При отправке формы без ввода данных появляется ошибка. Проверка на минимальное количество символов: минимум два символа.
Добавление поля почты 27:29 Копирование и изменение кода для поля почты. Проверка правильности ввода почты. Добавление правила для проверки правильности ввода почты.
Проверка номера телефона 30:32 Добавление поля для номера телефона. Подключение библиотеки inputmask.js. Настройка маски для номера телефона.
Настройка маски для номера телефона 33:20 Создание переменной для хранения селектора. Подключение маски для номера телефона. Настройка маски для ввода номера телефона.
Валидация номера телефона 37:07 Добавление проверки на ввод номера телефона. Использование кастомной проверки. Настройка валидатора для проверки номера телефона.
Введение в маски и валидацию 39:10 Использование масок для ввода номера телефона без лишних символов. Проверка ввода с помощью функции return Boolean. Пример проверки ввода с использованием фигурных скобок и констант.
Настройка валидации 40:44 Проверка ввода на соответствие маске. Пример кода для проверки ввода номера телефона. Настройка сообщения об ошибке при неверном вводе.
Стилизация ошибок 42:11 Использование JavaScript для стилизации ошибок. Установка расширения для подсветки синтаксиса. Настройка цвета и позиционирования ошибок.
Позиционирование и стилизация 44:06 Позиционирование текста ошибки сверху. Настройка абсолютного позиционирования для текста ошибки. Пример стилизации текста ошибки внутри input.
Заключение 47:16 Завершение видео и призыв к подписке и лайкам. Призыв оставлять комментарии с вопросами и предложениями тем для будущих видео. Напоминание следить за синтаксисом и скобками.
