Multi-step form with only Mobile Layout implemented (tbc)

Community feedback

• 

  Pavel B.•270

  @JagholinPosted over 1 year ago

  Some things I noticed:

  • error status is not cleared when the user corrects the wrong input, but only when they press the "next step" button. To fix, you can reevaluate error states in onChange events.

  • phone input doesnt [recognize '+'] or spaces. Also [minsize 10] is too large, phone numbers can be way shorter.

  • in slices/formSlice.ts I would add checks that you are not doing out-of-bounds array access.

  • your regexp for phone numbers is way too specific and doesnt allow much room for different formats, and only accepts 10 digits. Also it has an obvious error - to add spaces to a character range [], you have to add slash in front \s. I recommend using a tool like regex101 to handle regular expressions.

  • if you are using <label> with htmlFor, it needs an id of the element that the label refers to, not the name. See https://developer.mozilla.org/.

  • Your checkboxes all have the same id attribute. This is invalid - HTML elements should have unique ids, if any. You can use React's useId() hook to generate unique IDs.

  • On the second page your options dont have any real form elements, (and neither any ARIA attributes) which hurts accessibility. To fix, you can hide an <input type="radio" > in there. This will also help with tab-navigation on this page(or if you want to bruteforce this part, you can set tabindex attribute.

  • Using a translation file for strings is an interesting idea(and one I havent seen here before), but without any UI connected to it its completely invisible to the user. I assume this is something for the future versions of this project.

  • overall it's a good project and shows that you have knowledge about a lot of topics.

  • but I also have a feeling that it's way heavier and more complicated than it should be. Other side of a coin :)

  Marked as helpful

  0