Add front end validation error messages

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
     }
   },

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.'
   }
 }

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>