Submitted over 2 years ago
Intro component with signup form with vanilla JS and A11y
@piyathperera
Design comparison
SolutionDesign
Solution retrospective
Hi everyone, This is interesting challenge, had some challenges in figuring out how to display custom form validation error messages.
- Used the browser default Constraint validation API to check if a field is valid and display custom message via JavaScript.
- Removed the placeholder fields from the solution as it is not a ux consideration when it comes to usability.
- Add a11y aria tags that will read out validation messages when a field is invalid. Only tested with windows narrator.
- Used fluid types and spaces with Utopia, This is a reason why solution is overflowing. It's more readable but need to find a sweet spot.
As always any feedback to improve the solution is welcome. Thanks.
Community feedback
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