Практика #12

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

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

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

Макеты: https://www.figma.com/file/OAYtuZYjTYFZ9zIuit26gpaE/%D0%9F%D1%80%D0%BE%D0%BA%D0%B0%D1%82

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).

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

Made with Slides.com