Design comparison
Solution retrospective
I am fairly sure that there are better ways to handle the email notification form - at least compares to what I did here, it was pretty bad I have to admit.
Please let me know how you guys tackle it, thanks!
Community feedback
- @DavidMorgadePosted about 2 years ago
Hello Scott, congrats on finishing the challenge, pretty good job, the layout looks responsive and flows very good when resizing the browser!
Before diving into the validations question, first of all I would change the
button
on the form directly to ainput type='submit'
wich always fits better on forms (even on little ones that just need 2 fields)For the validation you should use Javascript, the html validation is not that bad but with Javascript you could trackle every type of posibility with a regular expression, and dinamically add a custom class that alers the user that the email is incorrect / required or whatever. You don't need to learn those regex by yourself, you can simply google them and use in your own code.
Hope my feedback helps you! go for some JS for your next challenge!
1@NationsAnarchyPosted about 2 years ago@DavidMorgade Haha, I knew someone would say that
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
Feel free to have a look, brother :D
1@DavidMorgadePosted about 2 years ago@NationsAnarchy Yeah the pattern attribute is awesome, but in my opinion not worth because you will lose a lot of control on your email input. For example, on JS you can validate when the user just start typing, or looses focus on the input instead of just on the submit.
Also, for frameworks like React / Angular / Vue, you usually render errors based on a condition from the user input in your script.
But for basic projects, yeah, pattern should do the job!, and don't forget that email validations on client side are just a visual thing, they should always get validate server side.
Nice point Scott on the html pattern prop!
1@NationsAnarchyPosted about 2 years ago@DavidMorgade I am currently doing stuff with React as my full-time job actually, so I get what you mean.
And of course, this is a more simple project, which is more heavy towards HTML/CSS - those are the two things I am having a gap to fill quickly + as soon as possible.
But anyway, I really appreciate the detailed explanation ;D This should be very valuable for beginners about the particular subject
1
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