
Design comparison
Solution retrospective
I had to refresh my memory on how to make form interactions accessible, which includes leveraging aria-required
, aria-describedby
, and aria-invalid
attributes, along with programmatic focus management so that the user's place of focus isn't lost. I also implemented a custom keyboard focus indicator, as it wasn't explicitly provided as an active state on in input in the design spec.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @yemmighto
I really love this, checking out what you did, gave me some insight and corrections on what I did, thanks
- @ylin320
The structure is well-organized. Great job! 🎉
📌 Email Validation
Current implementation in
signup-form.js
:isValidEmail(email) { const emailRegExp = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegExp.test(email); }
Issues:
- Too permissive – allows invalid emails like
!dsa@dsa.dsa
- Does not enforce valid TLD length
- Accepts special characters that shouldn’t be allowed
💡 Recommended Fix:
isValidEmail(email) { const emailRegExp = /^[a-zA-Z0-9]+@[a-zA-Z]+\.[a-zA-Z]{2,}$/; return emailRegExp.test(email); }
- Ensures only valid characters are used
- Prevents invalid domain formats
- Enforces a minimum TLD length of 2 characters
Overall, this is a well-structured and well-implemented newsletter signup form!Keep up the great work! 🚀
- Too permissive – allows invalid emails like
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