Практика #12

Страницы авторизации, регистрации и реквизитов карты. Валидация формы реквизитов карты

Что предстоит сделать?

Мы продолжаем проект, который начали на прошлой практике. Сегодня мы сделаем страницы авторизации/регистрации и страницу с реквизитами карты.

Макеты: тык

1. Нужно сверстать страницу реквизитов карты согласно макету (работаем с шаблоном card-requisites.html).

2. Создать в папке js файл card-requisites.js и подключить на странице с версткой. В этом файле следует добавить следующие функции, на них нужно ориентироваться при написании кода:

• cardNumberValidate(cardNumberValue)

• cardDateValidation(cardDateValue)

• cvvValidate(cardCvvValue)

• renderError(tooltipDataId, error, elem)

• hideError(tooltipDataId, elem)​

Задание на практику

3. Добавить валидации, общие для всех полей. Все валидации полей происходят после потери фокуса с непустого поля и при попытке отправить форму. Это поведение работает для всех правил валидации в этом уроке, если не написано иное для конкретного правила. В этом занятии мы не сохраняем форму реквизитов карты, поэтому нужно отменить стандартное поведение формы.

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

4. Для поля номер карты задать следующее поведение:

• Поле валидно, только если номер карты состоит из 16 цифр.
• Если поле валидно при потере фокуса, то нужно отформатировать значению поля по маске  '0000 0000 0000 0000' (пробел после каждых 4х цифр).

5. Добавить валидации для полей срока действия карты:

• Номер месяца и номер года имеют двухзначный формат.
• Номер месяца должен существовать.
• Год окончания действия карты не может быть меньше текущего года.
• Обычно в банке выдают карту на 5 лет. Если ввести год больше, чем срок годности карты, то такое поведение тоже считается ошибочным.
• По потере фокуса из поля нужно убирать все символы, которые не являются цифрами. После двух цифр необходимо вставить разделитель (/), который будет отделять месяц от года.

​6. Добавить полю CVV валидацию, что значение состоит из 3 цифр.

7. Сверстать страницу регистрации по макету (шаблон registration.html).​ ​

8. Сверстать страницу авторизации по макету (шаблон login.html).

Полезные ссылки

• Отрисовка геометрических фигур с помощью CSS
• Событие по потере фокуса