Submitted almost 5 years ago

Email validation with VanillaJS, SCSS, HTML

vongphakdy•140

@vongphakdy

Preview site View code

This is a solution for...Base Apparel coming soon page

HTML
CSS
JS

1newbie

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

Solomon Ekrebe•610
@krebeDevPosted almost 5 years ago
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
@vongphakdyPosted almost 5 years ago
@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
Matt Studdert•13,611
@mattstuddertPosted almost 5 years ago
Great work on this challenge and with making the updates to your solution. It looks great! 🙌
0

Please log in to post a comment

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