LiBee• 390
@Li-Bee
Posted
This is great! I was having so much trouble trying to work out the email validation (have not fully learned JavaScript yet!). Have bookmarked as a guide.
0
Design comparison
Solution retrospective
Hi everyone,
Thanks for checking my solution out.
Had a question regarding the error message. I implemented it by having its visibility set to none and then just "turning it on" if needed. This way I can plan for the space that it takes when I do the layout around it. But was wondering if that's best practice or it's better to do it by display: none and adjusting the space as needed.
Jeremy
Community feedback
P
ApplePieGiraffe• 30,565
@ApplePieGiraffe
Posted
Hey there, once again, Jeremy Ng! 👋
Good work on this challenge! 👍 Your solution looks great, responds nicely, and the form validation works well! 👏
You could still set the display property of the error message to none and then change it later to show/hide the error message. Just wrap the error message in a container and give the container a fixed height so that there will still be space for the error message even when it isn't displayed. 🙂
And don't forget to label the input element in some way to improve the accessibility of your solution! 😉
Keep coding (and happy coding, too)! 😁
1
Jeremy Ng• 200
@lanechanger
Posted
@ApplePieGiraffe Thanks as always APG :)
The label solved that last accessibility issue too, although I left it blank since I don't want any added text.
I branched off and tried the display solution with a div wrapper, works like a charm! Is the display method more accepted as a standard/best practice? Because I think I would still prefer the visibility method to save one less wrapper and also if any font size changes occur you can see it happen immediately without having the display to turn back on.
1
P
ApplePieGiraffe• 30,565
@ApplePieGiraffe
Posted
@lanechanger
No problem! 👍
I'm like you in that I don't like to have any extra containers or anything in my markup unless I need to, but off of the top of my head, I believe that simply setting the opacity of the error message to 0 would (while visually hiding the message) leave it there for screen readers to pick up, which wouldn't be ideal (since it might be read even when there are no errors). Using display: none on the error message will remove it from the page and screen readers won't read it, so that would better for this sort of situation, I think. And BTW, speaking of accessibility, maybe you could look into even adding aria-live: polite somewhere so that the message is announced when it is displayed. 😉
1
Jeremy Ng• 200
@lanechanger
Posted
Oops request button is wrapping over to a new line for some reason, going to fix that and the reported issues first!
Edit: ok, should be good now!
0
Please log in to post a comment
Log in with GitHub
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