Ping coming soon page with Email validation using JavaScript
Design comparison
Solution retrospective
What is the correct way to show the error message during email validation? (i) having a div element with paragraph and toggling its display: none; property through js? OR (ii) having a span element, positioning it absolute, relative to the input field and setting its innerHTML as empty string or our desired message? I've used the (ii) method to display error message. Your feedback regarding this issue is much appreciated. Thank You
Community feedback
- @vanzasetiaPosted over 1 year ago
Hi, Muthu Kumar N P! π
The alternative text of the logo should be the company name instead of "Company logo".
You should give the
<input>
a label by usingaria-label
attribute.The error message should be wrapped by a paragraph element. Remember, text content should be wrapped by a meaningful element.
The error message should also be programmatically connected with the associated
<input>
. Then, it should be a live region by addingaria-live
attribute. This way, the screen readers will read the message as soon as it gets populated with text through JavaScript.Learn more β How To Create Accessible Form with Boring Design? - CodeNewbie Community π±
illustration-dashboard.png
is a decorative image. For your information, decorative images are images that don't add any information and serve only aesthetic purposes.Links must have accessible names. You can use
aria-label
to provide an accessible name to each link.Avoid using JavaScript to add styling (unless you have no other option). JavaScript allows you to change the CSS code using the
style
property. But, to make debugging easier and improve code maintainability, itβs best to avoid it. Use CSS classes instead.I recommend using
const
for thevalidRegex
variable. Also, I recommend improving the name of the variable toemailRegex
. Doing this will make clear the purpose of the regular expression.I hope you find this useful. Happy coding! π
Marked as helpful0@muthucodesPosted over 1 year ago@vanzasetia Thank you for your time, Vanza Setia. I will incorporate your suggestions in my next iteration.
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