pt-br ๐ง๐ท |
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:
API | Limitation |
---|---|
BIN Codes | Registration required and limit of 20 requests per day |
BINLIST.NET | No need to register, but it has stopped being updated (2023) and has a limit of 10 requests per minute |
bincheck.io | Registration required and limit of 1000 requests per month |
-
โ๏ธ 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