pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #137 from dod-ccpo/ui/field-validation-setup

Browse Source 
Ui/field validation setup
This commit is contained in:
andrewdds 2018-08-08 16:22:00 -04:00 committed by GitHub
commit cda0b6301b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 142 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
js/components/text_input.js Normal file
View File

@ -0,0 +1,82 @@
import MaskedInput, { conformToMask } from 'vue-text-mask'
import inputValidations from '../lib/input_validations'
export default {
name: 'textinput',
components: {
MaskedInput
},
props: {
name: String,
validation: {
type: String,
default: () => 'anything'
},
value: {
type: String,
default: () => ''
}
},
data: function () {
return {
showError: false,
showValid: false,
mask: inputValidations[this.validation].mask,
renderedValue: this.value
}
},
mounted: function () {
const value = this.$refs.input.value
if (value) {
this._checkIfValid({ value, invalidate: true })
this.renderedValue = conformToMask(value, this.mask).conformedValue
}
},
methods: {
// When user types a character
onInput: function (value) {
this._checkIfValid({ value })
},
// When field is blurred (un-focused)
onChange: function (e) {
// Only invalidate the field when it blurs
this._checkIfValid({ value: e.target.value, invalidate: true })
},
//
_checkIfValid: function ({ value, invalidate = false}) {
// Validate the value
const valid = this._validate(value)
// Show error messages or not
if (valid) {
this.showError = false
} else if (invalidate) {
this.showError = true
}
this.showValid = valid
// Emit a change event
this.$emit('fieldChange', {
value,
valid,
name: this.name
})
},
_validate: function (value) {
// Strip out all the mask characters
let rawValue = inputValidations[this.validation].unmask.reduce((currentValue, character) => {
return currentValue.split(character).join('')
}, value)
return inputValidations[this.validation].match.test(rawValue)
}
}
}

5
js/index.js
View File

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

20
js/lib/input_validations.js Normal file
View File

@ -0,0 +1,20 @@
import createNumberMask from 'text-mask-addons/dist/createNumberMask'
import emailMask from 'text-mask-addons/dist/emailMask'
export default {
anything: {
mask: false,
match: /^(?!\s*$).+/,
unmask: [],
},
dollars: {
mask: createNumberMask({ prefix: '$', allowDecimal: true }),
match: /^-?\d+\.?\d*$/,
unmask: ['$',',']
},
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: [],
}
}

4
package.json
View File

@ -13,8 +13,10 @@
"dependencies": {
"npm": "^6.0.1",
"parcel": "^1.9.7",
"text-mask-addons": "^3.8.0",
"uswds": "^1.6.3",
"vue": "^2.5.17"
"vue": "^2.5.17",
"vue-text-mask": "^6.1.2"
},
"devDependencies": {
"node-sass": "^4.9.2"

2
templates/base.html
View File

@ -16,6 +16,7 @@
<body class="{% if g.modalOpen %} modalOpen{% endif %}">
<div id='app-root'>
{% block template_vars %}{% endblock %}
{% include 'navigation/topbar.html' %}
@ -33,7 +34,6 @@
</div>
{% include 'footer.html' %}
{% block modal %}{% endblock %}
</div>

32
templates/styleguide.html
View File

@ -130,15 +130,29 @@
<form>
<div class='usa-input'>
<label for='basic-text-1'>
Basic Text Input
<span class='usa-input__help'>
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'/>
</div>
<textinput inline-template validation='dollars' value='1231231'>
<div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
<label for='basic-text-1'>
Dollars Text Input
<span class='usa-input__help'>
This is some help text to explain what this form field is and why you should fill it out.
</span>
<template v-if='showError'>{{ Icon('alert') }}</template>
<template v-if='showValid'>{{ Icon('ok') }}</template>
</label>
<masked-input
v-on:input='onInput'
v-on:change='onChange'
v-model='renderedValue'
id='basic-text-1'
type='text'
ref='input'
placeholder='$'
:guide="true"
:mask="mask">
</masked-input>
</div>
</textinput>
<div class='usa-input usa-input--error'>
<label for='basic-text-2'>

8
yarn.lock
View File

@ -6325,6 +6325,10 @@ terser@^3.7.3:
source-map "~0.6.1"
source-map-support "~0.5.6"
text-mask-addons@^3.8.0:
version "3.8.0"
resolved "https://registry.yarnpkg.com/text-mask-addons/-/text-mask-addons-3.8.0.tgz#17b61ef665a4f36811f2ea1f01a223b4be61ab26"
text-table@~0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@ -6675,6 +6679,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"