Validation in a flyout

Question

I display application settings in a flyout (my app runs in 'Assigned Access' aka 'Kiosk' mode).

One of the settings is presented by a TextBox where user can fill a web address.

If the web address is not valid, I need to notify user about it.

I have two issues:

#1. According to the guidelines, there should be no Save / Commit button on the flyout.

In this case, how do I validate the field?

I don't see other way but to have a 'Save' button.

#2. If user taps outside the flyout, is it OK  to interpret as cancelling the settings edit? 

Answer 1

Take a look at how the Mail app handles Accounts for an example.

Accept the web address as entered and start the validation process as soon as it makes sense. When this is will depend on how the validation works and how expensive it is. Typical locations might be whenever the text changes (for inexpensive syntax checks) or when the user leaves the field (for more expensive).

If the user is still on the settings pane when the validation ends then notify success or failure in place. If the user has left the settings pane then show an error panel. Where exactly will depend on how drastic the error is. See Choosing the right UI surfaces: Errors

The settings change would generally commit immediately, so dismissing the flyout would leave it with the new settings rather than rolling them back.

--Rob

Answer 2

Hi Andrei,

1. For the first case what u can do is that, as and when the focus is removed from text box you can start validating the field and may display a message in any text block below the field as error. If the field is valid u may ask for saving the setting by displaying the message and can also make visible OK and Cancel buttons on flyout.

2. If user taps anywhere else outside the flyout, it is ok to cancel the settings edit, but display a message regarding settings not saved for the user.