NFDev | A complete form validation with JS/HTML/CSS

Project developed as part of the Alura course "JavaScript na Web: validação de Formulários e HTML5". IT consists of a Client and Product Register form with JS diferent validation strategy for each field of the form.

🪧 Vitrine.Dev
✨ Nome	NFDev - form validation with JS/HTML/CSS
🏷️ Tecnologias	JAVASCRIPT, HTML, CSS

Project Details

"Devs Registers Form" Page

"Cadastro Concluído" Page

"Product Register" Page

Detalhes do projeto

Validation Strategy:

Preparation

1. Hidden "span" tag after each "input" tag that will have its value changed according to the specific error or will be hidden when its all good. all of this using JS DOM manipulation.
2. Implement "data-tipo= nome/email/cpf/cep/... " attribute and "required" on each input
3. Create an object called "mensagensDeErro" with all kinds of "data-tipo". Also included for each of them the respective type of errors with their customized errors messages.
4. Create an object called "validadores" with the list of inputs that is going to have "customError" like: BirthDate, CPF and CEP. with a call to the specific validation function for each of them.
5. Used querySelectorAll to get all 'input' tags.
6. Then, used add.eventListener('blur') using forEach on "inputs" array.
7. Inside the forEach also included a call for "Valida()" function with e.target parameter

Individual Validation Strategy (Client Register Form):

1. Name:

   • valueMissing: "valida()" Check "input.validity.valid" status: "true" for filled or "false" for empty by the time the input field loses focus (blur). If empty (false), it changes text content using innerHTML with a standard message for "valueMissing" type of error.

2. E-mail:

   • valueMissing: same as valueMissing name's error.
   • typeMismatch: define "Type='email'" standard HTML validation.

3. Password:

   • valueMissing: same as valueMissing name's error.
   • patternMismatch: used a HTML attribute with a REGEX to validate the password with this rules:
     • REGEX = ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?!.*[!@#$%^&*_=+-]).{6,12}$
     • 6-12 characters
     • At least 1 capital letter
     • At least 1 lower case letter
     • At least 1 number
     • Can't have symbols

4. Birth Date:

   • valueMissing: same as valueMissing name's error.
   • customError: check if is older then 18yr old.
     • Calls "valida()" function that check if "tipoDeErro"="dataNascimento" is included on "validadores" object
     • "validadores()" identifies "dataNascimento" and calls "validaDataNascimento()"
     • "validaDataNascimento()" saves input.value and calls "MaiorQue18()" to check the client age.
     • "MaiorQue18()" function gets the input.value+18 using getUTCFullyear + 18, getUTCMonth and getUTCDate, and compare with todays date "new Date()" and returns true if is younger.
     • Then, "validaDataNascimento()" checks this return and loads the error messages by using "setCustomValidity()"
     • If there's no problem, an empty string '' is loaded
     • If its younger than 18, a specific message is loaded

5. CPF:

   • valueMissing: same as valueMissing name's error.
   • customError: check if the input follows CPF rules.
     • Calls "valida()" function that check if "tipoDeErro"="CPF" is included on "validadores" object
     • "validadores()" identifies "CPF" and calls "validaCPF()"
     • "validaCPF()" saves input.value and remove all symbols by using .replace(/\D/g, '')
     • Then, it makes 2 checks by calling 2 different function:
     • checaCPFRepetido() -> checks if the number typed were all the same, example: 1111111111
     • checaEstruturaCPF() -> checks if it follows all the CPF rules

6. CEP:

   • valueMissing: same as valueMissing name's error.
   • patternMismatch: used a HTML attribute with a REGEX to validate the CEP with this rules:
     • REGEX = [\d]{5}-?[\d]{3}
     • starts with 5 numbers
     • 1 optional "-"
     • end with 3 numbers
   • customError: check if there is a valid response from the API. URL = https://viacep.com.br/ws/${cep}/json/
     • Calls "valida()" function that check if "tipoDeErro"="CEP" is included on "validadores" object
     • "validadores()" identifies "CEP" and calls "recuperarCEP()"
     • "recuperarCEP()" saves input.value and remove all symbols by using .replace(/\D/g, '')
     • then, if there's no patternMismatch or valueMissing errors, is initialized a Fetch request
     • Depending on the answer it can set an erro message or it can call preencherCampoComCEP() to fill the rest of the form fieds: logradouro, cidade and estado
     • For these last 3 fields was also implemented valueMissing error

Individual Validation Strategy (Product Register Form):

1. Name:

   • valueMissing: exactly the same strategy of the Client form.

2. Price:

   • valueMissing: exactly the same strategy of the Client form.
   • It was also implemented a MASK imported from this link: https://github.com/codermarcos/simple-mask-money. This Mask works as a validation because it prevents wrong inputs like letter or symbols.

Lessons Learned

• HTML validation with required and type attribute
• HTML validation with pattern attribute + REGEX
• Create function to perform customized validation
• Create customized erro messages
• Using DATA attribute to work with HTML <-> JS
• DOM Manipulation with JS
• Different inputs validation: name, email, password, birthdate, CPF, CEP, complete address and price
• Creating reusable/recursive functions
• Restfull API

Technics, Technologies and Dependences used: