I have a system configuration / preferences "app" I'm designing as part of a larger browser-based application. Our overall application has "apps" (like a development app, a user management app, a catalogue app, etc) of which this is one.
This system configuration app is (behind the scenes) one giant configuration object broken up into several logical children, each of which is represented by a left-side menu (example: 'general configuration', 'database configuration', etc). Basically each side-menu contains a reasonably complex form (grids, tabs, etc).
There can be several of these configurations, and the user can choose which to edit using a drop-down at the top of the page (named "configure").
My question is, what is the most logical/reasonable/expected way to handle saving and validating this app? Given that the "save" api is (behind the scenes) universal to the entire app contents?
Options I've considered:
(1) save the entire object. If the user navigates through the side-menus, when they leave their changes are preserved. If the changes are invalid, the user is informed via warning, when they press save they are informed there are validation errors in tabs that aren't currently open.
(2) save each side-menu "sub object". If the user navigates through the side-menus, they are informed that their changes will be erased (if they made changes).
We normally validate fields as the user blurs out of a field, but there may be more involved server-side validation happening as well.
*Note: these side-menus are used in other apps in our application, as is the "action" bar (where save is located, marked in blue). In some apps, they clearly require to save before leaving the sub-menu.
Here is the app: