Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Ping Coming SOON Using HTML CSS & JS (client side form validation)

Sky 945

@Skyz03

Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello 👋, I finished another JS form validation challenge which really gave me a good insight on client side form validation. My question is how do we add regex for email check where it also checks for .com or others thank you for your feedback in advance.

Community feedback

P
Grace 27,870

@grace-snow

Posted

Hi

I can’t actually see the error message as it’s overlapped by the button (on mobile)

You also need to

  • give the input a label (visually hidden)
  • associate the label and error message with aria-describedby on input linking to Id of the error span
  • add aria live to that error span
  • wrap the social icons in anchor tags that are also labelled (visually-hidden).
  • then make sure all interactive elements have obvious focus-visible styles

Good luck

Marked as helpful

2

P
Grace 27,870

@grace-snow

Posted

Ps use a tool like regex101 or read up more and you’ll find lots of examples for email pattern regex that will check for patterns like “must have letters/numbers, followed by @, followed by letters, followed by . followed by letters”

1
Sky 945

@Skyz03

Posted

@grace-snow Thanks for the advice will surely implement this out and let you know.

0
Sky 945

@Skyz03

Posted

@grace-snow Thanks again I updated most of the aspects you mentioned and got a good grasp of those to consider in future. Thank you for making a great community 👍✌😊⭐

0

Please log in to post a comment

Log in with GitHub
Discord logo

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