Sign up form using JavaScript

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 8 months ago

  Oi @flaviare1s!

  Parabéns pelo seu primeiro projeto nível Junior! 😊

  Tenho algumas sugestões:

  • A primeira vez que vi sobre o checkValidity() foi em um projeto seu, e eu já tinha feito projetos que precisavam de validações e ainda assim, nunca tinha ouvido falar desse método. Fui pesquisar pra aprender a usar e é bem legal. Só fique atenta às limitações, pois o checkValidity checa a se input é válido de acordo com os atributos que você coloca nesse input. No seu caso, você usou os atributos type e required, ou seja, ele vai validar se tem um arroba no meio do texto digitado e também vai dar erro se ficar vazio.

  Você consegue adicionar mais validações usando if/else com javascript, tipo: Se o email tiver mais de 30 caracteres, a mensagem de erro mostra uma mensagem dizendo que o email está muito longo. (Esse é apenas um exemplo, você consegue validar da forma que quiser).

  Resumindo, o HTML já te fornece essa forma de validação e o Javascript te ajuda a tornar essa validação ainda mais robusta e com mensagens de erro personalizadas pra cada tipo de erro.

  • A segunda sugestão é você capturar o valor digitado no input e jogar ele dentro desse elemento <span class="font-bold">[email protected]</span> na tela de "Thanks for subscribing". No momento, não importa o email digitado, lá sempre aparece esse mesmo email [email protected]. E na verdade essa mensagem diz que enviou uma mensagem de confirmação pro email do usuário, não esse email exemplo.

  • Última sugestão: Coloca um link pro seu index.html dentro do botão "Dismiss message". Assim, quando o usuário clicar, ele será redirecionado pra tela inicial.

  Espero que as sugestões ajudem!

  Fora isso, seu projeto ficou excelente!

  Marked as helpful

  1

  ---

  

  P

  Flávia Reis•650

  @flaviare1sPosted 8 months ago

  @danielmrz-dev , obrigada pelo feedback e pelas sugestões, ajudaram muito! Não vejo a hora de chegar em casa e fazer essas alterações! 😊

  1

  

  P

  Flávia Reis•650

  @flaviare1sPosted 8 months ago

  @danielmrz-dev , no caso de colocar um maxlenght, o checkValidity serviria para esse exemplo do e-mail longo que você citou?

  1

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 8 months ago

  @flaviare1s Serviria, mas vou tentar explicar melhor. Se você pegar um input e der console.log(input.validity), vai aparecer isso no console do DevTools:

  ValidityState
  tooLong: false
  tooShort: false
  valid: true
  valueMissing: false
  

  Aparece uma lista maior do que essa, mas eu peguei só esses 4 pra facilitar o entendimento.

  Cada um desses tipos de erro estão vinculadas a atributos que você coloca no input no HTML. Por exemplo, nesse caso acima, o valid está como true porque eu não coloquei nenhum atributo no HTML, mas se eu colocasse required no HTML, o valid daria false, e o valueMissing daria true. A mesma coisa serviria se eu colocasse os atributos minlength e maxlength. Se o valor do input for menor do que o minlength, o erro tooShort daria verdadeiro. E se o valor digitado no input for maior do que o maxlength, o erro tooLong daria verdadeiro. E assim por diante.

  Parece complicado porque mistura a validação do HTML com Javascript, mas uma vez que você entende como usar, fica um pouco mais fácil.

  Marked as helpful

  1