How to deal with browser navigation in multi step form with validation
I am not a designer nor UX person. I am implementing an application which has multi-step form. Imagine that in this form some steps (screens) need to be validated before person can proceed to next step.
The application has also its own prev/next buttons with progress (dots), showing the person remaining amount of steps needed to be taken.
I am having issue with how to deal with browser navigation. Ideally I want each step of the form to have its own URL. This means URL would control what is rendered (some data for the form is cached in the browser and prefilled for the user). But what happens when user uses browser navigation to visit an URL that should not be allowed?
I have screen 1 containing a form and screen 2 containing some content. User needs to fill the form in screen 1 to proceed to screen 2. Let's say user fills the form and is redirected to screen 2. Now the user decides to go back, either by using application navigation or browser navigation (both is possible). The scenario which I'm trying to figure out is when user clears the form and uses browser back button. At this point the application is in invalid state.
How to deal with this? I don't know what is the right approach. Maybe I should not let user go to URL that should not be visible to him and instead redirect him to screen 1? But that could be problematic as user would not get any indication.