Design comparison
Solution retrospective
Just finished this challenge ... the JavaScript was the most difficult when I try to validate the email and show the error but finally, I did it also I will update the mobile responsive and enhance it soon.
Community feedback
- @riccardofanoPosted over 2 years ago
Hello Melad, excellent job on getting the javascript working!
I wanted to let you know there's an easier way to validate an email, in fact, the browser already does it for you. Instead of checking if
inputText
's value matches the regular expression you can just accessinputText.validity.valid
thanks to having set<input type="email">
. It does the exact same thing but it's a lot less work for you!Having set input as
type="email"
also allows you to style css elements by accessing its:valid
or:invalid
state so if you want to add a red border if your input is invalid you could do.base-input:invalid { border: 1px solid red; }
You can take a look at my solution for more details. Hope this was helpful and have a wonderful day!
Marked as helpful0@melad99Posted over 2 years ago@riccardofano thanks for your feedback and yes I tried type="email" but to be honest I just wanted to improve my skills with JavaScript so I chose the hard way but I will try the: valid and: invalid it's new to me and I appreciate sharing this with me ...thanks again ,good luck with your solutions.
0 - @amr4409Posted over 2 years ago
You can view my code in javascript
and add your
mailformat
in the conditionand set the
svg
in the backgroundthank you for see my feed back you can visit my profile and give me your feedback
1@melad99Posted over 2 years ago@amr4409 Thanks amr for your comment but i already did that and the JavaScript works and ofc i will see your code 👍🏻
0
Please log in to post a comment
Log in with GitHubJoin 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