Тестовое задание.
- Реализовать html-страницу с формой регистрации.
Список полей формы: Имя Фамилия Email Пароль Подтверждение пароля Дата рождения
Требования: Ко всем полям должны быть соответствующие заголовки.
Требований по расположению формы, заголовков и полей ввода нет.
Реализовать валидацию полей формы средствами Javascript. Требования к валидации полей формы: Поля Имя и Фамилия содержат только допустимые символы для имени и фамилии и должны иметь адекватное ограничение по длине.
Поле Электронный адрес должен содержать только валидный email-адрес. Значения полей Пароль и Подтверждение пароля должны совпадать.
Минимальная длина пароля 8 символов. Пароль должен содержать минимум одну цифру, по одной заглавной и строчной буквы и один символ.
Возраст пользователя на момент регистрации в форме должен быть не младше 18 лет.
Валидация данных должна происходить после ввода пользователем и потери фокуса на элементе формы.
Кнопка "Отправить" должна быть заблокирована свойством "disabled", пока пользователь не введёт валидные значения.
Пользователь должен иметь возможность понять ошибку(и) и исправить их с минимальным количеством попыток.
Требования к реализации:
- Использование любых JS-фреймворков категорически неприемлемо.
- При невозможности реализовать без JS-фреймворка просьба сообщить об этом сразу.
- Использование любых примеров, найденных в интернете, которые реализуют ту или иную часть задания, категорически неприемлемо.
- Код должен запуститься в браузерах Firefox, Chrome и Edge последних версий.
- Типы элементов формы должны соответствовать вводимым значениям. HTML-код страницы должен пройти валидацию через https://validator.w3.org/.
Каждый элемент формы должен иметь атрибут id, включая сообщения, используемые для валидации. Придерживаемся следующих наименований для инпутов:
id="first-name" id="last-name" id="email" id="password" id="password-confirm" id="birth-day" id="form-button"
По результатам валидации, теги form и все элементы формы (теги input \ textarea \ etc) дополняются классом "invalid" в случае невалидности формы \ элемента формы и "valid" в случае валидности.