Responsive Newsletter Mobile First Approach using HTML CSS JS
Design comparison
Solution retrospective
Difficulties
I had some contradictory feelings when building this solution, some of them were:
- Ain't quite sure about the validation. Should've shown the validation after clicking the button or while writing the email? Did them both somewhat anyway.
- I am not quite sure if the javascript is right. Still learning. Any tips are welcomed.
Community feedback
- @sgarcialagunaPosted about 1 year ago
1.) You can use a dialog element to significantly simplify your code. Take a look at the examples shown here: MDN
2.) Form validation can be tricky to get quite right. Personally, I like the form to let me finish typing before it yells at me. One approach to make this work is to set a dirty flag after the input's blur event. If the dirty flag is set and an input is invalid, show an error. But there isn't one true answer for that.
3.) Browser have in-built validation for email fields, see MDN If the field is invalid, the :invalid pseudo-state is set, which you can use for styling. I know people will say to use this crazy regex or that one, but ultimately the one sure-fire way to validate an email address is to send an email to that address, so I just like to take what the browser offers me.
Marked as helpful0@dnkratosPosted about 1 year ago@sgarcialaguna
Thank you for your tips.
Looks exiciting, I just read the MDN about the dialog tag and seems relatively easy to implement ( I might be wrong ). Gonna give it a try and update the solution after I get it right and if I end up saving drying the code.
Personally me too. Never heard about a dirty flag, but I will search the internet about it and maybe try that too. Sounds interesting and fun.
I ended up removing the browser validation for "invalid" reasons XD.
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