input validations WIP

js/components/text_input.js

@@ -1,3 +1,65 @@
-export default {
-  name: 'textinput'
+import MaskedInput from 'vue-text-mask'
+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)
+    }
+  }
 }