I'm writing a desktop application that allows a user to create a project and add data sources to it. I need to allow the user to edit existing data sources so they can change advanced options not exposed when adding it, or just to change settings if the data source itself changes. The main GUI where they could edit the data sources is mocked up below:
In this mockup, the left list is all user-added data sources and the right-hand side contains the details of the selected data source. Since the fields need to be validated for correctness (i.e. you can't enter an HTTP URL for an FTP data source) and database constraints (names must be unique), I need to provide feedback when a value is invalid. As I see it, I have two options:
When a field loses focus (or a "target" is added), the data is sent to the database for validation and saving (in one step). This way there is no explicit "Save" button, saving the user clicks. If an error occurs I'd like to display an overlay/tooltip near the field explaining why the value is invalid. The problem with this approach is that a user could enter an invalid value and then click on another data source in the list. Doing so would not save the data they typed in and since they'd be loading another source they wouldn't see the error. This feels unexpected.
Offer a "Save" button in the lower or upper right that sends all updated values to the database. The database will stop at the first error, so only one invalid value will be shown each time "Save" is invoked. I don't like this approach since I don't think the button should be necessary, but it gets around the user missing an error like in the first approach (clicking on a different data source in the list would be similar to canceling editing).
In either situation, if an error occurs the data is not saved in the database.
Is the missed error in option one a valid concern? Is there another way to display configuration forms like this, or possibly some good examples to refer to? My primary concerns are simplicity of the UI and quick editing of configuration values.
For what it's worth this is a WPF GUI that uses the MahApps.Metro library for a Metro/Modern UI look and feel.