Add front end validation error messages
This commit is contained in:
parent
db1dd062ee
commit
8659132989
@ -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
|
||||
}
|
||||
},
|
||||
|
@ -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.'
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user