Design comparison
Solution retrospective
It was hard but fun challenge.
It is needed to make custom form validation that I made with help of mdn web docs. For main design I used grid Any tips and feedback are welcomed. Especially according to javascript/validation part.
Community feedback
- @grace-snowPosted over 1 year ago
As well as the error alignment issue raised in the discord chat, I can see a few issues with the html here
- this is not appropriate for an article
- header must be outside of main. They are distinct landmarks
- the logo must have alt saying the same text as the logo image
- the input must have a label. It is not enough to use the label element when there is no text that can be read as the label text. Usually only checkboxes or radio inputs would be wrapped in the label element because they always contain label text as well
- the button must be labelled too (have an accessible name). It is effectively empty when it only contains a decorative image
- to programmatically link the error message and input, add a unique ID to the error, and aria-desciribedby on the input pointing to that ID
I'm really surprised you've used jQuery in this to be honest. It's such a huge bloated library and you really don't need it for such a simple bit of form validation. Maybe challenge yourself to refactor this and do a version with vanilla js. The only time you'll encounter jquery now is in pretty old projects and it's more valuable to focus learning on the underlying tech if possible
Marked as helpful0@kubas33Posted over 1 year ago@grace-snow
Thanks for your feedback! I will try to work more on this. What do you suggest instead of article? I have troubles to guess what tags to use in what situations.
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