input validations WIP

This commit is contained in:
Andrew Croce 2018-08-07 15:43:03 -04:00
parent 3f752280f2
commit b649d17eb8
6 changed files with 99 additions and 13 deletions

View File

@ -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)
}
}
}

View File

@ -1,14 +1,13 @@
import classes from '../styles/atat.scss'
import Vue from 'vue/dist/vue'
import TextInput from './components/text_input'
const components = {
TextInput
}
import textinput from './components/text_input'
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
}
})

View File

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

View File

@ -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"

View File

@ -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'>

View File

@ -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"