Added validation feedback for Application Info, Employer, and WIOA se…

…ctions. Added login error messaging.
ais-open · Nov 1, 2016 · 21b8f0c · 21b8f0c
1 parent 904045b
commit 21b8f0c
Show file tree

Hide file tree

Showing 12 changed files with 347 additions and 202 deletions.
diff --git a/DOL.WHD.Section14c.Web/.eslintrc.js b/DOL.WHD.Section14c.Web/.eslintrc.js
@@ -49,7 +49,7 @@ module.exports = {
         //Best Practices
         "accessor-pairs": 2,
         "block-scoped-var": 0,
-        "complexity": [2, 6],
+        "complexity": [2, 12],
         "consistent-return": 0,
         "curly": 0,
         "default-case": 0,
@@ -154,7 +154,7 @@ module.exports = {
         "max-len": 0,
         "max-nested-callbacks": 0,
         "max-params": 0,
-        "max-statements": [2, 30],
+        "max-statements": [2, 50],
         "new-cap": 0,
         "new-parens": 0,
         "newline-after-var": 0,

diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionAppInfo/sectionAppInfoController.js b/DOL.WHD.Section14c.Web/src/modules/components/sectionAppInfo/sectionAppInfoController.js
@@ -1,11 +1,12 @@
 'use strict';
 
 module.exports = function(ngModule) {
-    ngModule.controller('sectionAppInfoController', function($scope, stateService, responsesService) {
+    ngModule.controller('sectionAppInfoController', function($scope, stateService, responsesService, validationService) {
         'ngInject';
         'use strict';
 
         $scope.formData = stateService.formData;
+        $scope.validate = validationService.getValidationErrors;
 
         if (!$scope.formData.establishmentType) {
             $scope.formData.establishmentType = [];

diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionAppInfo/sectionAppInfoTemplate.html b/DOL.WHD.Section14c.Web/src/modules/components/sectionAppInfo/sectionAppInfoTemplate.html
@@ -1,9 +1,10 @@
 <div class="form-page">
     <h2 class="form-section-header">Application Type</h2>
     <hr />
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('applicationType') ? 'usa-input-error' : ''">
         <div class="form-question-text">What type of application is this?</div>
         <div class="form-question-subtext">If the employer currently holds a valid 14(c) certificate, choose Renewal. If not, choose Initial.</div>
+        <span class="usa-input-error-message" role="alert" ng-show="validate('applicationType')">{{ validate('applicationType') }}</span>
         <fieldset class="usa-fieldset-inputs form-question-answer">
             <ul class="usa-unstyled-list">
                 <li ng-repeat="response in responses.ApplicationType">
@@ -14,8 +15,9 @@ <h2 class="form-section-header">Application Type</h2>
         </fieldset>
     </div>
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('hasPreviousApplication') ? 'usa-input-error' : ''">
         <div class="form-question-text">Has this employer ever applied for a 14(c) certificate?</div>
+        <span class="usa-input-error-message" role="alert" ng-show="validate('hasPreviousApplication')">{{ validate('hasPreviousApplication') }}</span>
         <fieldset class="usa-fieldset-inputs form-question-answer">
             <ul class="usa-unstyled-list">
                 <li>
@@ -30,8 +32,9 @@ <h2 class="form-section-header">Application Type</h2>
         </fieldset>
     </div>
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('hasPreviousCertificate') ? 'usa-input-error' : ''">
         <div class="form-question-text">Has this employer ever previously held a 14(c) certificate?</div>
+        <span class="usa-input-error-message" role="alert" ng-show="validate('hasPreviousCertificate')">{{ validate('hasPreviousCertificate') }}</span>
         <fieldset class="usa-fieldset-inputs form-question-answer">
             <ul class="usa-unstyled-list">
                 <li>
@@ -46,17 +49,19 @@ <h2 class="form-section-header">Application Type</h2>
         </fieldset>
     </div>
 
-    <div class="form-question-block" ng-show="formData.hasPreviousCertificate === true">
+    <div class="form-question-block" ng-show="formData.hasPreviousCertificate === true" ng-class="validate('certificateNumber') ? 'usa-input-error' : ''">
         <div class="form-question-text">What is the most recently held certificate number for the main establishment?</div>
+        <span class="usa-input-error-message" role="alert" ng-show="validate('certificateNumber')">{{ validate('certificateNumber') }}</span>
         <div class="form-question-answer">
             <input id="certificateNumber" name="certificateNumber" type="text" class="sidelabeled certificateno" mask="99-99999-A-999" ng-model="formData.certificateNumber">
             <label class="example">Example: 12-34567-H-890</label>
         </div>
     </div>
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('establishmentType') ? 'usa-input-error' : ''">
         <div class="form-question-text">What type of establishment(s) is this request for authority to employ workers with disabilities for?</div>
         <div class="form-question-subtext">Select all that apply</div>
+        <span class="usa-input-error-message" role="alert" ng-show="validate('establishmentType')">{{ validate('establishmentType') }}</span>
         <fieldset class="usa-fieldset-inputs form-question-answer">
             <ul class="usa-unstyled-list">
                 <li ng-repeat="response in responses.EstablishmentType">
@@ -72,32 +77,36 @@ <h2 class="form-section-header">Application Contact Person</h2>
     <div class="form-question-subtext">This should be a person who can best answer questions concerning information contained on this application.</div>
     <hr />
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('contactName') ? 'usa-input-error' : ''">
         <div class="form-question-answer">
             <label for="contactName">Full Name</label>
+            <span class="usa-input-error-message" role="alert" ng-show="validate('contactName')">{{ validate('contactName') }}</span>
             <input id="contactName" name="contactName" type="text" ng-model="formData.contactName"></input>
         </div>
     </div>
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('contactPhone') ? 'usa-input-error' : ''">
         <div class="form-question-answer">
             <label for="contactPhone">Telephone Number</label>
+            <span class="usa-input-error-message" role="alert" ng-show="validate('contactPhone')">{{ validate('contactPhone') }}</span>
             <input id="contactPhone" name="contactPhone" type="tel" mask="999-999-9999" ng-model="formData.contactPhone" class="sidelabeled phoneno"></input>
             <label class="example">Example: 123-456-7890</label>
         </div>
     </div>
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('contactFax') ? 'usa-input-error' : ''">
         <div class="form-question-answer">
             <label for="contactFax">Fax Number</label>
+            <span class="usa-input-error-message" role="alert" ng-show="validate('contactFax')">{{ validate('contactFax') }}</span>
             <input id="contactFax" name="contactFax" type="tel" mask="999-999-9999" ng-model="formData.contactFax" class="sidelabeled phoneno"></input>
             <label class="example">Example: 123-456-7890</label>
         </div>
     </div>
 
-    <div class="form-question-block">
+    <div class="form-question-block" ng-class="validate('contactEmail') ? 'usa-input-error' : ''">
         <div class="form-question-answer">
             <label for="contactEmail">Email Address</label>
+            <span class="usa-input-error-message" role="alert" ng-show="validate('contactEmail')">{{ validate('contactEmail') }}</span>
             <input id="contactEmail" name="contactEmail" type="email" ng-model="formData.contactEmail" class="sidelabeled email"></input>
             <label class="example">Example: contact.name@company.com</label>
         </div>

diff --git a/DOL.WHD.Section14c.Web/src/modules/components/sectionEmployer/sectionEmployerController.js b/DOL.WHD.Section14c.Web/src/modules/components/sectionEmployer/sectionEmployerController.js
@@ -1,11 +1,12 @@
 'use strict';
 
 module.exports = function(ngModule) {
-    ngModule.controller('sectionEmployerController', function($scope, stateService, apiService, responsesService) {
+    ngModule.controller('sectionEmployerController', function($scope, stateService, apiService, responsesService, validationService) {
         'ngInject';
         'use strict';
 
         $scope.formData = stateService.formData;
+        $scope.validate = validationService.getValidationErrors;
 
         if (!$scope.formData.employer) {
             $scope.formData.employer = {};
@@ -45,10 +46,10 @@ module.exports = function(ngModule) {
         this.toggleDeductionType = function(id) {
             let index = $scope.formData.employer.providingFacilitiesDeductionTypeId.indexOf(id);
             if (index > -1) {
-                $scope.formData.providingFacilitiesDeductionTypeId.splice(index, 1);
+                $scope.formData.employer.providingFacilitiesDeductionTypeId.splice(index, 1);
             }
             else {
-                $scope.formData.providingFacilitiesDeductionTypeId.push(id);
+                $scope.formData.employer.providingFacilitiesDeductionTypeId.push(id);
             }
         }