input validations WIP

js/components/text_input.js

@@ -1,3 +1,65 @@
-export default {
+import MaskedInput from 'vue-text-mask'
-  name: 'textinput'
+import inputValidations from '../lib/input_validations'
+
+const validationTypes = {
+  matchAnything: /^(?!\s*$).+/,
+  matchDigits: /^\d+$/,
+  matchNumbers: /^-?\d+\.?\d*$/,
+  matchUrl: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/,
+  matchEmail: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
+}
+
+export default {
+  name: 'textinput',
+  data: () =>({
+    valid: false,
+    filled: false,
+    showError: false,
+    showValid: false,
+    validationType: inputValidations.anything.match,
+    mask: inputValidations.anything.mask
+  }),
+  components: {
+    MaskedInput
+  },
+  methods: {
+    // When user types a character
+    onInput: function (value) {
+      this._checkIfFilled(value)
+      this._checkIfValid(value)
+    },
+
+    // When field is blurred (un-focused)
+    onChange: function (value) {
+      this._checkIfInvalid(value)
+    },
+
+    _checkIfFilled: function (value) {
+      this.filled = (value && value !== '') ? true : false
+    },
+
+    _checkIfValid: function (value) {
+      const valid = this._validate(value)
+      if (valid) {
+        this.showError = false
+      }
+      this.valid = valid
+      this.showValid = valid
+    },
+
+    _checkIfInvalid: function (value) {
+      const valid = this._validate(value)
+      if (!valid) {
+        this.showError = true
+      } else {
+        this.showError = false
+      }
+      this.valid = valid
+      this.showValid = valid
+    },
+
+    _validate: function (value) {
+      return this.validationType.test(value)
+    }
+  }
 }

js/index.js

@@ -1,14 +1,13 @@
 import classes from '../styles/atat.scss'
 import Vue from 'vue/dist/vue'
 
-import TextInput from './components/text_input'
+import textinput from './components/text_input'
-
-const components = {
-  TextInput
-}
 
 const app = new Vue({
   el: '#app-root',
+  components: {
+    textinput
+  },
   methods: {
     closeModal: function(name) {
       this.modals[name] = false
@@ -23,6 +22,5 @@ const app = new Vue({
         styleguideModal: false,
       }
     }
-  },
+  }
-  components: components
 })

js/lib/input_validations.js

@@ -0,0 +1,12 @@
+export default {
+  anything: {
+    mask: [],
+    unmask: null,
+    match: /^(?!\s*$).+/
+  },
+  dollars: {
+    mask: ['$','/^\d+/','.','/^\d+/'],
+    unmask: ['$',','],
+    match: /^-?\d+\.?\d*$/
+  }
+}

package.json

@@ -14,7 +14,8 @@
     "npm": "^6.0.1",
     "parcel": "^1.9.7",
     "uswds": "^1.6.3",
-    "vue": "^2.5.17"
+    "vue": "^2.5.17",
+    "vue-text-mask": "^6.1.2"
   },
   "devDependencies": {
     "node-sass": "^4.9.2"

templates/styleguide.html

@@ -130,7 +130,7 @@
 
 
       <form>
-        <TextInput inline-template>
+        <textinput inline-template>
           <div class='usa-input'>
             <label for='basic-text-1'>
               Basic Text Input
@@ -138,9 +138,18 @@
                 This is some help text to explain what this form field is and why you should fill it out.
               </span>
             </label>
-            <input id='basic-text-1' type='text' placeholder='this is a sample of what you should enter'/>
+            <masked-input
+              v-on:input='onInput'
+              v-on:change='onChange'
+              id='basic-text-1'
+              type='text'
+              placeholder='this is a sample of what you should enter'
+              :mask="mask">
+            </masked-input>
+          <div v-if='showError'>Error</div>
+          <div v-if='showValid'>Valid</div>
           </div>
-        </TextInput>
+        </textinput>
 
         <div class='usa-input usa-input--error'>
           <label for='basic-text-2'>

yarn.lock

@@ -6675,6 +6675,10 @@ vm-browserify@0.0.4, vm-browserify@~0.0.1:
   dependencies:
     indexof "0.0.1"
 
+vue-text-mask@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/vue-text-mask/-/vue-text-mask-6.1.2.tgz#2cc18a1ca04ea66798518a9373929a12256d14b9"
+
 vue@^2.5.17:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"