How do I follow validation best practices on a form with multiple views and tabs?

Question

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.

Answer 1

I think the best solution is to provide validation on each "screen"/step before moving on to the next "screen"/step even though it may not be submitting. In my experience, it is an awkward UX if I have to go back in the form to fix something I already filled out or skipped.

The form validation, if an error exists, should display a notification somewhere on the screen saying a simple like "You have errors" (be more descriptive then that though) and display a message beside the errored inputs on the error is about. The input should be very noticeable when it has a error as it should "pop out" to the user.

Example below: