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 form with React, Typescript and Tailwindcss

#react#typescript#tailwind-css
Juan Cruz Silva• 220

@JuaniSilva

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


Hey! Hope you like my solution, any feedback will be welcomed. I still need to figure out a better way to validate inputs

Community feedback

WandoCode• 840

@Wandole

Posted

Hey,

For the form validation, you could validate each field separately in a given function.

To make the validation:

  • the name field => just check the length of the value (string)
  • the email field => you can use a RegEx and the method <string>.match()
  • the phone field => use an input:text and RegEx/match too!

When a field doesn't pass the validation, you can add the name of this field in an array/object and when every fields has been checked, you return the array/object to your main function.

That way, if your validation function return an empty array, you know the validation has passed, otherwise, you have the name of the field(s) that are not valid and you can display that on screen using a state!

There are probably other ways to do that, but that's how I do it!

I hope it helps!

Marked as helpful

1

@catherineisonline

Posted

Look nice! I would also add validation for the name input so I cannot write any number values :))

IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

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