From cda585c3a358282c48f3b8ed5f7b07fdaae3c4d4 Mon Sep 17 00:00:00 2001 From: luis cielak Date: Tue, 14 Aug 2018 15:03:59 -0400 Subject: [PATCH] Update validation icon placement and placeholders --- js/components/text_input.js | 3 +- js/lib/input_validations.js | 16 ++++----- styles/elements/_inputs.scss | 54 ++++++++++++++++++++++++++-- templates/components/text_input.html | 3 +- templates/requests/screen-1.html | 12 +++---- 5 files changed, 70 insertions(+), 18 deletions(-) diff --git a/js/components/text_input.js b/js/components/text_input.js index d45570ed..8e4f8048 100644 --- a/js/components/text_input.js +++ b/js/components/text_input.js @@ -18,7 +18,8 @@ export default { type: String, default: () => '' }, - initialErrors: Array + initialErrors: Array, + paragraph: String }, data: function () { diff --git a/js/lib/input_validations.js b/js/lib/input_validations.js index fdf49a03..3806af8c 100644 --- a/js/lib/input_validations.js +++ b/js/lib/input_validations.js @@ -7,31 +7,31 @@ export default { mask: false, match: /^(?!\s*$).+/, unmask: [], - validationError: 'Please enter a response.' + validationError: 'Please enter a response' }, integer: { mask: createNumberMask({ prefix: '', allowDecimal: false }), match: /^[1-9]\d*$/, unmask: [','], - validationError: 'Please enter a number.' + validationError: 'Please enter a number' }, dollars: { mask: createNumberMask({ prefix: '$', allowDecimal: true }), match: /^-?\d+\.?\d*$/, unmask: ['$',','], - validationError: 'Please enter a dollar amount.' + validationError: 'Please enter a dollar amount' }, gigabytes: { mask: createNumberMask({ prefix: '', suffix:' GB', allowDecimal: false }), match: /^[1-9]\d*$/, unmask: [',',' GB'], - validationError: 'Please enter an amount of data in gigabytes.' + 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.' + validationError: 'Please enter a valid e-mail address' }, date: { mask: [/\d/,/\d/,'/',/\d/,/\d/,'/',/\d/,/\d/,/\d/,/\d/], @@ -39,18 +39,18 @@ export default { unmask: [], pipe: createAutoCorrectedDatePipe('mm/dd/yyyy HH:MM'), keepCharPositions: true, - validationError: 'Please enter a valid date in the form MM/DD/YYYY.' + 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.' + 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.' + validationError: 'Please enter a 10-digit DoD ID number' } } diff --git a/styles/elements/_inputs.scss b/styles/elements/_inputs.scss index 31aac23a..61fa4148 100644 --- a/styles/elements/_inputs.scss +++ b/styles/elements/_inputs.scss @@ -74,11 +74,12 @@ .icon-validation { position: absolute; - left: 100%; + // left: 0%; top: 100%; margin-top: 1.4rem; margin-left: $gap; } + } .usa-input__title { @@ -109,6 +110,7 @@ @include line-max; margin: 0; box-sizing: border-box; + max-width: 32em; &:hover, &:focus { @@ -173,7 +175,55 @@ .usa-input__message { @include h5; display: inline-block; - padding-top: $gap; + } + + &--validation { + + &--anything, + &--email { + input { + max-width: 26em; + } + .icon-validation { + left: 26em; + } + } + + &--paragraph { + .icon-validation { + left: 32em; + } + } + + &--integer, + &--dollars, + &--gigabytes, { + input { + max-width: 16em; + } + .icon-validation { + left: 16em; + } + } + + &--date, + &--usPhone { + input { + max-width: 10em; + } + .icon-validation { + left: 10em; + } + } + + &--dodId { + input { + max-width: 18em; + } + .icon-validation { + left: 18em; + } + } } &.usa-input--error { diff --git a/templates/components/text_input.html b/templates/components/text_input.html index 0a005032..7b808cec 100644 --- a/templates/components/text_input.html +++ b/templates/components/text_input.html @@ -5,13 +5,14 @@
+ v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph }]">