Multi-step form using React, React Router, Redux and Tailwind CSS

Community feedback

• 

  Cipi•220

  @CipiVladPosted 7 months ago

  Hi Mirror83, I think you did a great job here. I'm looking at your app on a 1920x1080 screen, and I would suggest

  #id=root >
  max-width: 1240px;
  margin: 0 auto;
  

  At least for me it's then very close to the original design. I'm facing issues getting pass to "next step" ... phone number validation won't let me even though I'm providing numbers. Do you face the same issue?

  Marked as helpful

  0

  ---

  

  Mirror83•170

  @Mirror83Posted 7 months ago

  @CipiVlad Thanks for the width suggestion. I will update the code as soon as I can.

  I did not have any issues with the phone number validation. Does it not let you through even when typing it in the format specified in the placeholder?

  Update: @CipiVlad I've updated the max-width property. Please let me know if the updated app looks OK and if you have still have issues with the phone number field.

  0
• 

  Cipi•220

  @CipiVladPosted 7 months ago

  Hi Mirror83, the resolution looks very good on my screen :)

  As for the phone validation, it didn't work for me at first to get to step 2, until I discovered in your code that with regex ‘ value: /^+\d{1,3} \d{3} \d{3} \d{3}$/ ‘ the exact sequence as in the placeholder is required by the user. So ‘+1 234 567 890’ or ‘+2 234 567 567’ works, but it does not work without a space between the characters ‘+1234567890’. Is this intentional? If so, then this validation works perfectly.

  0

  ---

  

  Mirror83•170

  @Mirror83Posted 7 months ago

  @CipiVlad Thanks for the feedback on the resolution.

  As for the phone validation, it is intentional. I saw that this was the format specified in the design, so I decided to match it exactly. Also I think it makes the number easier to parse.

  0