I'm designing a set of screens where the user inputs certain data on Screen #1, Screen #2, Screen #3, etc. At the end of their journey they're presented with a final review screen, where the user can confirm that their input is correct. If they want to correct a value, they can click on a "edit" button next to the field, similar to how many review screens are designed:
Here's the crux of my problem. Let's say that I have a validation rule requiring that the Delivery Address and the Billing Address must be within the same country. Now the user can have the following flow:
- Open both Delivery Address and Billing Address sections
- Change the country in both
- Click Save on Delivery Address
- Click Cancel on Billing Address
- Since Cancel reverts the form section to the previous state, I am now in an invalid state where the countries mismatch between the two sections
How can I avoid this scenario? Some options I've thought of:
- Require that sections are edited one at a time -> inconvenience for the user (?)
- Enforce validations on Cancel button -> weird UX (?)
- Prevent saving a state that might result in an error state -> weird UX and easy to get wrong in the JS code (?)