I'm developing a Workflow application using Angular 2 and bootstrap. We have several forms where the user will submit one form, wait for his choices to be configured somewhere, and the form will be updated when it is completed so they can move on to the next step. We want to provide rigorous validation on these fields as we don't want something to be configured that shouldn't be. We have about 4 forms, and the flow is modeled as:
Enter General Info + enter first environment info -> Submit -> Enter second environment info -> Submit -> Enter final environment info -> Submit
The General Info screen is on one view, the user will click the next button and move on to the next screen, and continue entering information. We are planning on having validation trigger on submit, but I'm not sure where to show the validation messages. I've done my research, and it says to place the message next to the input, but if the view is hidden, how do I display this information? I was thinking about having a message saying something like
There is an error in the General Tab Under the button after they submit, and when they click that message it brings up the General tab where the more specific messages are shown next to or under the inputs. Is this a good design solution?
Note: I'd provide a mockup of what my site looks like, but my work laptop doesn't have Flash 10, so I can't use the mockup tool, and I can't provide a screenshot of the site as it is still in development.