@danielmrz-dev
Posted
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.htmldentro 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
@flaviare1s
Posted
@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! 😊
@flaviare1s
Posted
@danielmrz-dev , no caso de colocar um maxlenght, o checkValidity serviria para esse exemplo do e-mail longo que você citou?
@danielmrz-dev
Posted
@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
