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

Multi-step from using react with full unit tests

Richard 320

@riwepo

Desktop design screenshot for the Multi-step form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback at all is greatly appreciated.

One of the tricky parts to this project was managing the state as the user moved forward and backwards between the forms. I used react context to share state between the form components, and to re-hydrate the form inputs when the user went back.

I included what seemed to me fairly exhaustive unit tests, using react testing library. It would be great to get some feedback about the amount of tests I used and the different techniques.

I do have one specific question I have regarding validation of the form fields. I validated the field data on blur. This seems to work well, except when you do the last field on the form. The validation doesn't happen until the field loses focus but there is nowhere for the user to click because the submit button is still disabled at that time. The user has to click away to make the button enabled. How do people normally deal with this?

Community feedback

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