I need to cancel a SettingsFlyout hide when there is a validation error and I cannot figure out how to do it.
I have a SettingsFlyout which contains a simple HTML form for entering a user name and password:
<!DOCTYPE html>
<html>
<head>
<title>Security</title>
<script type="text/javascript" src="securitySettings.js"></script>
</head>
<body>
<div id="divSecurity"
data-win-control="WinJS.UI.SettingsFlyout"
data-win-options="{
width:'narrow'
}">
<div class="win-header"
style="background-color:#464646">
<button
onclick="WinJS.UI.SettingsFlyout.show()"
class="win-backbutton"></button>
<div class="win-label">Security</div>
</div>
<div class="win-content">
<form id="frmSecurity">
<div>
<label>
User Name:
<input required />
</label>
<label>
Password:
<input type="password" required />
</label>
</div>
</form>
</div>
</div>
</body>
Notice that both the userName and password fields are required (using the HTML5 required attribute).
I want to validate the form before saving the userName and password. So, I am using the following code:
(function () {
'use strict';
WinJS.UI.Pages.define("securitySettings.html",
{
ready:function(element,options) {
var divSecurity = document.getElementById("divSecurity").winControl;
var frmSecurity = document.getElementById("frmSecurity");
divSecurity.addEventListener("beforehide", function (evt) {
var good = frmSecurity.checkValidity();
// Nothing below works!
evt.preventDefault();
evt.stopPropagation();
evt.stopImmediatePropagation();
divSecurity.show();
});
}
});
}());
Here's the problem: I want to prevent the SettingsFlyout from hiding when there is a validation error. I am trying to prevent the SettingsFlyout from hiding within the beforehide event but I cannot figure out how to do it. I've tried: evt.preventDefault(),
evt.stopPropagation(), evt.stopImmediatePropagation(), and even calling show() again on the original SettingsFlyout control. None of these approaches work.
Therefore, the question is how do you include a form (with validation) in your app settings? I've read the guidance here
http://msdn.microsoft.com/en-us/library/windows/apps/hh770544.aspx and it states:
When a user changes a setting, the app should reflect the change immediately. A new setting value is applied as soon as the user stops interacting
with a particular setting control. This is recommended for light-dismiss surfaces. If your app doesn’t apply the new values to the settings store by the time the settings Flyout closes, the new values might be lost, because a settings Flyout shouldn't have
a commit button. Handle the beforeshow and afterhide events
to do control initialization and state serialization.
So, it sounds like a separate submit button for the userName and password form would not be recommended. Suggestions?
-- Stephen
