input validations WIP
This commit is contained in:
parent
3f752280f2
commit
b649d17eb8
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
12
js/index.js
12
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'
|
||||
|
||||
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
|
||||
}
|
||||
})
|
||||
|
12
js/lib/input_validations.js
Normal file
12
js/lib/input_validations.js
Normal file
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
anything: {
|
||||
mask: [],
|
||||
unmask: null,
|
||||
match: /^(?!\s*$).+/
|
||||
},
|
||||
dollars: {
|
||||
mask: ['$','/^\d+/','.','/^\d+/'],
|
||||
unmask: ['$',','],
|
||||
match: /^-?\d+\.?\d*$/
|
||||
}
|
||||
}
|
@ -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"
|
||||
|
@ -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'>
|
||||
|
@ -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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user