Skip to content

Commit

Permalink
feat(provider/azure): Add form validation on submit
Browse files Browse the repository at this point in the history
Rather than disabling the submit button and forcing the user to guess which fields are required, always enable the button and display errors/focus to the first error on submit
Also remove the unused 'advancedSettings' pages (we actually use the pages in the 'wizard/advancedSettings' subfolder)
  • Loading branch information
ejizba authored and anotherchrisberry committed Apr 27, 2017
1 parent 7af5217 commit f2fdf44
Show file tree
Hide file tree
Showing 11 changed files with 64 additions and 180 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<form name="form" class="form-horizontal" novalidate>
<form name="form" class="form-horizontal" novalidate validate-on-submit>
<v2-modal-wizard heading="Create New Load Balancer" task-monitor="taskMonitor" dismiss="$dismiss()">
<v2-wizard-page key="Location" label="Location">
<ng-include src="pages.location"></ng-include>
Expand All @@ -13,7 +13,7 @@
<div class="modal-footer">
<button ng-disabled="taskMonitor.submitting" class="btn btn-default" ng-click="ctrl.cancel()">Cancel
</button>
<submit-button is-disabled="form.$invalid || !state.accountsLoaded || taskMonitor.submitting" submitting="taskMonitor.submitting"
on-click="ctrl.submit()" is-new="isNew"></submit-button>
<submit-button is-disabled="!state.accountsLoaded || taskMonitor.submitting" submitting="taskMonitor.submitting"
on-click="form.$valid && ctrl.submit()" is-new="isNew"></submit-button>
</div>
</form>
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<form name="form" novalidate>
<form name="form" novalidate validate-on-submit>
<v2-modal-wizard heading="Edit {{loadBalancer.name}}: {{loadBalancer.region}}: {{loadBalancer.credentials}}" task-monitor="taskMonitor">
<v2-wizard-page key="Listeners" label="Listeners" done="true">
<ng-include src="pages.listeners"></ng-include>
Expand All @@ -10,7 +10,7 @@
<div class="modal-footer">
<button ng-disabled="taskMonitor.submitting" class="btn btn-default" ng-click="ctrl.cancel()">Cancel
</button>
<submit-button is-disabled="form.$invalid || taskMonitor.submitting" submitting="taskMonitor.submitting"
on-click="ctrl.submit()" is-new="isNew"></submit-button>
<submit-button is-disabled="taskMonitor.submitting" submitting="taskMonitor.submitting"
on-click="form.$valid && ctrl.submit()" is-new="isNew"></submit-button>
</div>
</form>
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<form name="form" class="form-horizontal" novalidate>
<form name="form" class="form-horizontal" novalidate validate-on-submit>
<v2-modal-wizard heading="Create New Security Group" task-monitor="taskMonitor" dismiss="$dismiss()">
<v2-wizard-page key="Location" label="Location">
<ng-include src="pages.location"></ng-include>
Expand All @@ -10,8 +10,8 @@
<div class="modal-footer">
<button class="btn btn-default" ng-click="ctrl.cancel()">Cancel
</button>
<submit-button is-disabled="form.$invalid || state.submitting"
submitting="state.submitting" on-click="ctrl.upsert()" is-new="isNew">
<submit-button is-disabled="state.submitting"
submitting="state.submitting" on-click="form.$valid && ctrl.upsert()" is-new="isNew">
</submit-button>
</div>
</form>
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@
</div>
</div>
<div class="form-group">
<div class="col-md-4 sm-label-right">Description(optional)</div>
<div class="col-md-4 sm-label-right">Description</div>
<div class="col-md-8">
<input type="text" class="form-control input-sm" ng-model="securityGroup.description" />
</div>
</div>
<div class="form-group">
<div class="col-md-4 sm-label-right">Account</div>
<div class="col-md-8">
<account-select-field component="securityGroup" field="credentials" accounts="accounts" provider="'azure'" on-change="ctrl.accountUpdated()"></account-select-field>
<account-select-field required component="securityGroup" field="credentials" accounts="accounts" provider="'azure'" on-change="ctrl.accountUpdated()"></account-select-field>
</div>
</div>
<div class="form-group">
Expand Down

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -130,20 +130,6 @@ module.exports = angular.module('spinnaker.azure.cloneServerGroup.controller', [
}
}

this.isValid = function () {
return $scope.command &&
($scope.command.application !== null) &&
($scope.command.credentials !== null) &&
($scope.command.region !== null) &&
$scope.serverGroupWizardForm.$valid &&
v2modalWizardService.isComplete();
};

this.showSubmitButton = function () {
//return v2modalWizardService.allPagesVisited();
return true;
};

this.submit = function () {
if ($scope.command.viewState.mode === 'editPipeline' || $scope.command.viewState.mode === 'createPipeline') {
return $uibModalInstance.close($scope.command);
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<h3 us-spinner="{radius:30, width:8, length: 16}"></h3>
</div>
<div>
<form name="serverGroupWizardForm" class="form-horizontal" novalidate>
<form name="serverGroupWizardForm" class="form-horizontal" novalidate validate-on-submit>
<v2-modal-wizard ng-show="state.loaded && !state.requiresTemplateSelection"
heading="{{title}}"
task-monitor="taskMonitor"
Expand All @@ -29,8 +29,8 @@ <h3 us-spinner="{radius:30, width:8, length: 16}"></h3>
</v2-modal-wizard>
<div class="modal-footer" ng-if="state.loaded">
<button ng-disabled="taskMonitor.submitting" class="btn btn-default btn-cancel" ng-click="ctrl.cancel()">Cancel</button>
<submit-button ng-if="ctrl.showSubmitButton()" is-disabled="!ctrl.isValid() || taskMonitor.submitting" label="command.viewState.submitButtonLabel"
submitting="taskMonitor.submitting" on-click="ctrl.submit()" is-new="true"></submit-button>
<submit-button is-disabled="taskMonitor.submitting" label="command.viewState.submitButtonLabel"
submitting="taskMonitor.submitting" on-click="serverGroupWizardForm.$valid && ctrl.submit()" is-new="true"></submit-button>
</div>
</form>
</div>
Expand Down
1 change: 1 addition & 0 deletions app/scripts/modules/core/forms/forms.module.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@ module.exports = angular.module('spinnaker.core.forms', [
require('./ignoreEmptyDelete.directive.js'),
BUTTON_BUSY_INDICATOR_COMPONENT,
require('./mapEditor/mapEditor.component.js'),
require('./validateOnSubmit/validateOnSubmit.directive.js'),
NUMBER_LIST_COMPONENT
]);
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
'use strict';

let angular = require('angular');

module.exports = angular.module('spinnaker.core.forms.validateOnSubmit.directive', [])
.directive('validateOnSubmit', function() {
return {
restrict: 'A',
require: 'form',
link: function(scope, element, attrs, formCtrl) {

element.on('submit', function () {
// Set controls to dirty so that validation formatting is applied
var queue = [];
var invalidCtrl = formCtrl;
while (invalidCtrl) {
invalidCtrl.$setDirty();

angular.forEach(invalidCtrl.$error, function (invalidSubCtrls) {
if (angular.isArray(invalidSubCtrls)) {
// Add controls from sub-form
queue.push.apply(queue, invalidSubCtrls);
}
});

invalidCtrl = queue.shift();
}

// Click the form so that setDirty() takes immediate effect
formCtrl.$$element.click();

// Focus the first invalid element
// NOTE: 'form.$error.required' doesn't list elements in document order, so we can't use that
var firstInvalid = element.get(0).querySelector('.form-control.ng-invalid');
if (firstInvalid) {
firstInvalid.focus();

if (firstInvalid.hasChildNodes()) {
angular.forEach(firstInvalid.childNodes, function (child) {
if (child.classList && child.classList.contains('ui-select-focusser')) {
child.focus();
}
});
}
}
});
}
};
});

0 comments on commit f2fdf44

Please sign in to comment.