Best approach for this use case?
I have a form with 2 tabs. It's a single schema using discriminatedUnions.
If you click on tab A, it will display all the fields required for that variant, same if you click on the tab B.
The thing is, for tab A I have this requirement:
There is a dropdown that gives you 2 options. Option 1 and 2.
- If user selects option 1:
I'll display an input field so they can write their phone number. Next to the mobilePhone input will be a button to "send code" to their phones. I'll make an API call and they'll get their OTP code on their phones.
- As soon as they hit the button "send code" another input will appear on the screen to write down the "verification code".
- then the user has to fill out the other fields.
- At the end, the user can submit the form, but if for some reason they "change/update" the phone number, the form will be invalid.
- If they validate their phone, if they click on the other tab, the validation of the OTP should be start again (send OTP + confirm)
Any idea how can I achieve this?
It seems a TERRIBLE UX but it's what I've been told to implement.
I'm open to any suggestions, because at the end I don't care about the confirm otp field, the form needs to be sent without it, I just need to handle all the cases and prevent the user updates their phone number before sending the form (it's a mobile company) thanks
0 Replies