Skip to content
Submitted over 1 year ago

Intro component with sign-up form CSS Grid and vanilla JS

Wessel Konstantinov•350
@WesselKonstantinov
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro component with sign-up form
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Implementing the form validation was the most difficult part of this challenge. I ended up creating a separate function for checking the password strength and made it so the error message dynamically updates. I also used VoiceOver for accessibility testing and didn't run into any specific issues. However, I'm still new to screen reader testing, so I think I might have missed something. I would love to hear what you think.

Community feedback

  • Grace•31,090
    @grace-snowPosted over 1 year ago

    Hi

    This looks pretty good. The only real issue I see is one of UX more than code. It's not a nice experience to show error messages as soon as someone starts inputting to a field, and that would be disorientating for assistive tech users in particular.

    Instead, I would only add the input event listeners after the initial submit/blur

    I put validation libraries often call this "touch". So touch is false until validation has run once, then touch becomes true and validation continues from that point. Same principle applies here

    Marked as helpful
    1
    Wessel Konstantinov•350
    @WesselKonstantinovPosted over 1 year ago

    Hi @grace-snow

    I've made a few adjustments based on your feedback. Each field now has a custom "touched" attribute with a value set to "false". The validation now only runs when a user has interacted with a given field (by changing the input value and giving another element focus) or tries to submit the form without filling in the fields. What do you think of my current solution?

    0

Please log in to post a comment

Log in with GitHub

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