From 86591329897c6528ec5c054d48116feba6bc003f Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Fri, 10 Aug 2018 09:18:09 -0400
Subject: [PATCH] Add front end validation error messages

---
 js/components/text_input.js          |  1 +
 js/lib/input_validations.js          | 26 ++++++++++++++++++++++----
 templates/components/text_input.html |  1 +
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/js/components/text_input.js b/js/components/text_input.js
index a8aba8e2..d377002c 100644
--- a/js/components/text_input.js
+++ b/js/components/text_input.js
@@ -28,6 +28,7 @@ export default {
       mask: inputValidations[this.validation].mask,
       pipe: inputValidations[this.validation].pipe || undefined,
       keepCharPositions: inputValidations[this.validation].keepCharPositions || false,
+      validationError: inputValidations[this.validation].validationError || '',
       value: this.initialValue
     }
   },
diff --git a/js/lib/input_validations.js b/js/lib/input_validations.js
index 68f3b2a8..db5396c4 100644
--- a/js/lib/input_validations.js
+++ b/js/lib/input_validations.js
@@ -7,32 +7,50 @@ export default {
     mask: false,
     match: /^(?!\s*$).+/,
     unmask: [],
+    validationError: 'Please enter a response.'
   },
   integer: {
     mask: createNumberMask({ prefix: '', allowDecimal: false }),
     match: /^[1-9]\d*$/,
-    unmask: [',']
+    unmask: [','],
+    validationError: 'Please enter a number.'
   },
   dollars: {
     mask: createNumberMask({ prefix: '$', allowDecimal: true }),
     match: /^-?\d+\.?\d*$/,
-    unmask: ['$',',']
+    unmask: ['$',','],
+    validationError: 'Please enter a dollar amount.'
   },
   gigabytes: {
     mask: createNumberMask({ prefix: '', suffix:'GB', allowDecimal: false }),
     match: /^[1-9]\d*$/,
-    unmask: [',','GB']
+    unmask: [',','GB'],
+    validationError: 'Please enter an amount of data in gigabytes.'
   },
   email: {
     mask: emailMask,
     match: /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/,
     unmask: [],
+    validationError: 'Please enter a valid e-mail address.'
   },
   date: {
     mask: [/\d/,/\d/,'/',/\d/,/\d/,'/',/\d/,/\d/,/\d/,/\d/],
     match: /(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d/,
     unmask: [],
     pipe: createAutoCorrectedDatePipe('mm/dd/yyyy HH:MM'),
-    keepCharPositions: true
+    keepCharPositions: true,
+    validationError: 'Please enter a valid date in the form MM/DD/YYYY.'
+  },
+  usPhone: {
+    mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+    match: /^\d{10}$/,
+    unmask: ['(',')','-',' '],
+    validationError: 'Please enter a 10-digit phone number.'
+  },
+  dodId: {
+    mask: createNumberMask({ prefix: '', allowDecimal: false, includeThousandsSeparator: false }),
+    match: /^\d{10}$/,
+    unmask: [],
+    validationError: 'Please enter a 10-digit D.O.D. ID number.'
   }
 }
diff --git a/templates/components/text_input.html b/templates/components/text_input.html
index 9e2eb369..99d8be4d 100644
--- a/templates/components/text_input.html
+++ b/templates/components/text_input.html
@@ -56,6 +56,7 @@
 
       <template v-if='showError'>
         <span v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
+        <span v-if='!initialErrors.length' class='usa-input__message' v-html='validationError'></span>
       </template>
 
     </div>