website design – Best input validation approach for complex and busy screen


I have an extremely busy screen for a single page application that allows people to pick their own components and build a custom printed circuit board (following a template that we provide).

Our customers usually create and order a few (2-3) custom PCBs at a time and these are listed in a table.
Each row is a PCB and has a number of editable cells (5-10).

enter image description here

For each PCB there are a number of things that you can customise in detail (i.e. CPU: type, model, frequency, … memory: amount, type, frequency, etc…) and these are displayed in separate sections that can be expanded/collapsed below each PCB row.
Collapsing and expanding is possible via a context menu that is visible when you hover over each row.

Each section can have a high number (100-200) of fields (text boxes, checkboxes and selects) which make each section but also the whole application quite busy and data intensive.

Data can (obviously) be saved and, when done, you can test your configuration and order your PCB. Testing the configuration is an asynchronous operation and can take some time, so it’s an operation you want to do the least number of times.

Some validation happens as soon as you type (i.e. you can only enter numbers when specifying the clock frequency) which will prevent you from saving wrong data and some validation is done when you save each section (i.e. frequencies of certain components have to match with others etc…).

You can have warnings (non-blocking) and errors (blocking) and these will be visible in each section or on the field itself.

However, as previously mentioned, these configurations can be saved and the whole application reloaded – so ideally you could load your application and already have some warnings or errors that won’t be immediately visible (since they would only be visible in each hidden section).

This suggests warnings and errors should be visible at all times and well before you can test your configurations.

I have sketched a few different approaches but have their own drawbacks.

enter image description here

An expandable/collapsable sidebar on a side that lists warnings and errors.

The sidebar would also have an icon to display whether there are any problems before you expand it.

The drawback here can be that it takes up some horizontal space which is quite precious, given such data density.

enter image description here

Similar to approach 1, the sidebar would be displayed at the bottom of the screen.

And similarly, that takes vertical space, which is precious too since screens are in landscape mode and once a section is expanded it can be quite lengthy.

We could have another row below each row that is visible when there are any problems and can be expanded/collapsed when needed.

None of these seem quite right and I’m a bit short of ideas.

What’s the best approach that can be taken here that would improve UX?

Edit:
The above approaches also require extra clicks to get to the errors, which is something we would like to keep to a minimum, so ideally we’d like to always have the errors visible on the screen.