Многошаговая форма
Условие
Форма из трёх шагов. Требования: · виден только текущий шаг, поля - <input name="name">, <input name="email">, <input name="city">; · кнопки <button class="next"> и <button class="back">; · на первом шаге кнопки «назад» нет, на последнем вместо «далее» - <button class="submit">; · переход вперёд запрещён, если поле текущего шага пустое: показывается <div class="error">; · возврат назад сохраняет уже введённые значения; · submit вызывает onSubmit со всеми данными одним объектом; · индикатор <span class="step"> показывает «N из 3».
Что проверяют тесты
первый шаг без кнопки назад
пустое поле не пускает дальше
пробелы не считаются заполнением
проходит по шагам
назад сохраняет значения
на последнем шаге кнопка отправки
отправляет все данные
ошибка исчезает после успешного перехода
Как подойти
Ключевое решение - держать значения всех шагов в одном объекте, а не размонтировать поля вместе с их состоянием: иначе возврат назад теряет введённое. Шаги описываются данными, а не тремя ветками if - добавление шага становится строкой в массиве. Что назвать вслух: схема валидации на шаг, сохранение черновика в localStorage, шаг в адресной строке, чтобы перезагрузка не сбрасывала прогресс.
Подсказки: 3
- Данные всех шагов живут в одном объекте, а не по полю на шаг.
- Описание шагов - массив; текущий шаг задаётся индексом.
- Проверка заполненности должна быть с trim, иначе пробел пройдёт.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.