Design comparison
Solution retrospective
First exercise on HTML forms and their use with JS.
What I got from this project :
- Using several functions to clarify my code and decrease the writing of it;
- Use of regular expressions and first thoughts on data validation;
- First experience on event propagation with preventDefault();
I used very simple regular expressions for the validation of the mail, if you have any advice to improve it I'm interested!
Good continuation
Community feedback
- @vanzasetiaPosted over 2 years ago
Hi, Bazthos! π
Well done on this challenge! Your solution looks great! π It's nice that you have a hidden
h1
on this site (if this is a real website theh1
would exist somewhere else on the page).Regarding the RegEx for the email, I recommend searching the RegEx on the internet, and then once you find the one that almost works for you (it's hard to find to exact or "perfect" RegEx right away) then try improving the existing RegEx. I suggest using Regexr to help you understand what the RegEx is doing and at the same time learn RegEx and improve it as best as you can. This way, you ended up learning RegEx and possibly creating your own RegEx.
Now, some suggestions from me.
input
withtype="submit"
is a browser legacy. So, my recommendation is to usebutton
withtype="submit"
instead. Also, use CSS to uppercase the text. Uppercased text in HTML would more likely be spelled by screen readers.- Every
input
needs alabel
element. So, I recommend having asr-only
label or even better (in my opinion) is to make thelabel
as a placeholder (you can read this article by CSS Tricks about Form Validation with pure HTML and CSS).
Keep up the good work! π
Marked as helpful1 - @isprutfromuaPosted over 2 years ago
Hi there. You did a good job π
keep improving your programming skillsπ οΈ
your solution looks great, however, if you want to improve it, you can follow these recommendation:
β Keep using HTML5 validation attributes (required, minLength, pattern etc).
β Donβt re-implement stuff HTML5 attributes can do for us (no unnecessary JS).
β Follow a consistent HTML format. It is important to remain consistent in your HTML style. You can use prettier to help you with that but the goal is to always follow a consistent way you code your markup.
I hope my feedback will be helpful. You can mark it as useful if so π it is not difficult for you, but I understand that my efforts have been appreciated
Good luck and fun coding π€β¨οΈ
Marked as helpful0@vanzasetiaPosted over 2 years ago@isprutfromua Hey Ivan! It's great that you've been given helpful feedback. However, I don't recommend asking people to mark your comment as helpful. It might create additional pressure on the author of the solution to mark your comment as helpful.
So, my recommendation is to say something like "I hope you find this helpful" or "I hope my feedback helps", but please avoid asking for your comment to be marked as helpful explicitly.
Keep in mind that, the main goal of giving feedback is to help people and it is recommended not to expect anything in return. If the solution author marks your feedback as helpful, that's a bonus. π
P.S. I recommend reading the Frontend Mentor community guidelines to know more about what behaviors should be avoided and encouraged.
2
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