Add front end validation error messages

This commit is contained in:
Andrew Croce 2018-08-10 09:18:09 -04:00
parent db1dd062ee
commit 8659132989
3 changed files with 24 additions and 4 deletions

View File

@ -28,6 +28,7 @@ export default {
mask: inputValidations[this.validation].mask,
pipe: inputValidations[this.validation].pipe || undefined,
keepCharPositions: inputValidations[this.validation].keepCharPositions || false,
validationError: inputValidations[this.validation].validationError || '',
value: this.initialValue
}
},

View File

@ -7,32 +7,50 @@ export default {
mask: false,
match: /^(?!\s*$).+/,
unmask: [],
validationError: 'Please enter a response.'
},
integer: {
mask: createNumberMask({ prefix: '', allowDecimal: false }),
match: /^[1-9]\d*$/,
unmask: [',']
unmask: [','],
validationError: 'Please enter a number.'
},
dollars: {
mask: createNumberMask({ prefix: '$', allowDecimal: true }),
match: /^-?\d+\.?\d*$/,
unmask: ['$',',']
unmask: ['$',','],
validationError: 'Please enter a dollar amount.'
},
gigabytes: {
mask: createNumberMask({ prefix: '', suffix:'GB', allowDecimal: false }),
match: /^[1-9]\d*$/,
unmask: [',','GB']
unmask: [',','GB'],
validationError: 'Please enter an amount of data in gigabytes.'
},
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: [],
validationError: 'Please enter a valid e-mail address.'
},
date: {
mask: [/\d/,/\d/,'/',/\d/,/\d/,'/',/\d/,/\d/,/\d/,/\d/],
match: /(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d/,
unmask: [],
pipe: createAutoCorrectedDatePipe('mm/dd/yyyy HH:MM'),
keepCharPositions: true
keepCharPositions: true,
validationError: 'Please enter a valid date in the form MM/DD/YYYY.'
},
usPhone: {
mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
match: /^\d{10}$/,
unmask: ['(',')','-',' '],
validationError: 'Please enter a 10-digit phone number.'
},
dodId: {
mask: createNumberMask({ prefix: '', allowDecimal: false, includeThousandsSeparator: false }),
match: /^\d{10}$/,
unmask: [],
validationError: 'Please enter a 10-digit D.O.D. ID number.'
}
}

View File

@ -56,6 +56,7 @@
<template v-if='showError'>
<span v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
<span v-if='!initialErrors.length' class='usa-input__message' v-html='validationError'></span>
</template>
</div>