Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Email validation with VanillaJS, SCSS, HTML

vongphakdy 140

@vongphakdy

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have 2 error cases for email validation; the first is an empty field, second is an invalid email address. Both cases should activate the error message and icon, however only this only applies to the first case. When entering an invalid input, the form reveals a prompt rather than my coded error message/icon. I'm new to JS so I appreciate any input

Community feedback

@krebeDev

Posted

Hello @vongphakdy, Great job on this challenge. Your error message is not being activated because HTML5 form comes with built-in form validation. To deactivate this default behaviour and ensure your JavaScript code is triggered, add a novalidate attribute on the form element. In your case, your code will be like so <form novalidate class="main-form">.

Also, your JS form validation code should be enhanced to accommodate other use cases. For example, if a user enters a correct email after a wrong attempt, the error message should be discarded.

2

vongphakdy 140

@vongphakdy

Posted

@krebeDev Thanks so much for the feedback. The novalidate attribute worked as intended. I've also updated the validation to accept the correct email case.

1
P
Matt Studdert 13,611

@mattstuddert

Posted

Great work on this challenge and with making the updates to your solution. It looks great! 🙌

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord