An abstraction of a form commonly used in ecommerce, with the steps of personal data, address and payment method (involving only card payments). 🛒

Subjects • Demonstration • Structure • Validations • Achievements, difficulties and improvements

• HTML
• CSS
• JavaScript (Arrays, Objects, DOM and Fetch API)
• Regex (Capturing groups, replace method and its use, backreferences)

Try it here.

    ├── assets
    │    ├── flags
    │    ├── icons
    │    └── images
    │
    ├── css
    │    ├── components
    │    │     ├── button.css
    │    │     ├── calendar.css
    │    │     ├── input.css
    │    │     ├── label.css
    │    │     └── stepper.css
    │    │
    │    ├── form.css
    │    ├── global.css
    │    ├── payment.css
    │    ├── resume.css
    │    └── root.css
    │
    ├── js
    │    ├── components
    │    │     ├── calendar.js
    │    │     ├── form
    │    │     └── stepper.js
    │    │
    │    ├── pages
    │    │     ├── address.js
    │    │     ├── payment.js
    │    │     ├── personal-data.js
    │    │     └── resume.js
    │    │
    │    ├── utils
    │    │     ├── create-element.js
    │    │     └── formatter.js
    │    │
    │    └── validations
    │          ├── card-flag.js
    │          ├── date.js
    │          ├── input-mask.js
    │          └── inputs.js
    │
    ├── pages
    │    ├── address.html
    │    ├── payment.html
    │    └── resume.html
    │
    ├── index.html
    ├── LICENSE
    ├── package.json
    └── README.md

Most of the validations were done using custom functions and regex masks in the inputs, while the user types (onInput) or when the input loses focus (onChange) for a more immediate response, optimizing the user's time, facilitating and limiting what is entered in a simple, visually intuitive and pleasant way, in addition to ensuring greater tolerance to errors in the fields entered.

The onInput and onChange events are similar, but the main difference is that onInput occurs immediately after the input value changes, while onChange occurs when the input loses focus. Another difference is that onChange also works on <select> elements.

For most masks, the implementation was based on the concept of regex capturing groups along with the .replace() method which, at each value change, checks and, when necessary, add characteristic symbols using the temporary variables that are created and enumerated according to the order of opening parentheses in the expression.

Explaining better, capture groups are constructed by placing the pattern to be captured in parentheses. Example:

const phone = (value) => {
  return value
    .replace(/\D/g, "")
    .replace(/(\d{2})(\d)/, "($1) $2")
    .replace(/(\d{5})(\d)/, "$1-$2")
    .replace(/-(\d{4})(\d)/, "$1");
};

The substring corresponding to the group is saved in a temporary "variable", which can be accessed within the same regex using a backslash and the capturing group number, such as /(\d) \1/ or accessing through the notation $(group number), which is used in the replace method. Remembering that the enumeration is according to the position of its opening parentheses (from left to right), starting at 1:

  .replace(/(\d{2})(\d)/, "($1) $2")

This means that we want the first alphanumeric with size equal to 2 to be placed in parentheses and the next value entered to be separated from the first group with a space. We call these backreferences.

Regarding the method to validate and identify the card brand that I chose to follow, I inform you that it is not very recommended, as it is based on validating the card's BIN (the first 6 digits of the card number) in regex and BINs may change over the years. Furthermore, working with regex on this type of variable data is not scalable or easy to maintain.

Before you ask, I chose this method because it is independent of other services and, consequently, will not present future unavailability, despite possible incompatibilities that may occur in the available brands.

But for those who are interested in the services, I found some APIs that offer free tier:

• ☀️ Achievements:

  • Project structure organization;
  • Providing valuable error feedback to the user;
  • Limiting user error margins through the use of masks;
  • Creative solution for "simulating states" using only pure JavaScript.

• 🌧️ Difficulties:

  • Control error states for the inputs;
  • Establish a well-organized structure for the scripts and CSS folder;
  • Apply the Single Responsibility concept from SOLID;
  • Find reliable information to validate payment-related fields;
  • Implement regex to create masks for the inputs and search for information on how to implement it using pure JavaScript in a visually pleasing way for the fields.

• 🌈 Improvements:

  • When the user goes back a step, ensure that the filled information remains in the fields;
  • When the user leaves the page or clicks to go back, notify that the data from the current step will be lost before proceeding;
  • Enhance validation accuracy by utilizing one of the APIs mentioned in the Validation section in the Card brands.

Made with 💜 by Ana Beatriz Nunes