Multi-step-form with React

Community feedback

• 

  Herman•210

  @hqz3Posted over 1 year ago

  Hello, looking at your code I noticed the input element for the phone number is a "number", which provides stepper arrows for users to increase and decrease the value. However, this input type is used for integers. While it may sound logical that a type="number" should be applicable to a phone number, I learned from trial and error that the correct type is <input type="tel">. Using that, you can then figure out how to validate the phone number (i.e. format, area code, length).

  Also, in step 2, there is a buggy behavior where the "Next Step" button turns red after a plan has been selected. I noticed that when I choose a plan, then toggle the subscription term between "Monthly" and "Yearly" the "Next Step" button turns red and I cannot proceed. It's possible the state is being reset incorrectly, which disables the "Next Step" button.

  Marked as helpful

  0

  ---

  

  Marjan•320

  @MarjanZivkovicPosted over 1 year ago

  Hi @hqz3! Yes, you're correct. I completely overlooked this type of input. I guess because I'm not using it often.

  As for step 2, you're right. I did that on purpose since I'd had lots of problems when I change the state from monthly to yearly if something had been checked before. Then the user can proceed to the next step and I get even more buggy behavior where I get a monthly price for a plan and yearly prices for add-ons or vice-versa. So I decided to reset the states between every step and since I'm listening for a change event on inputs, the change on the selected plan did not occur so the button stays disabled.

  Anyway, reading your comment made me think about it again and I realize my mistake now. I should have conditionally rendered the whole input elements instead of just the text inside their labels. This would make my life much easier.

  Thanks for the feedback!

  0