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

Update validation icon placement and placeholders

Browse Source
This commit is contained in:
luis cielak 2018-08-14 15:03:59 -04:00 committed by luisgov
parent 483d606cf0
commit cda585c3a3
5 changed files with 70 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/components/text_input.js
View File

@ -18,7 +18,8 @@ export default {
type: String,
default: () => ''
},
initialErrors: Array
initialErrors: Array,
paragraph: String
},
data: function () {

16
js/lib/input_validations.js
View File

@ -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'
}
}

54
styles/elements/_inputs.scss
View File

@ -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 {

3
templates/components/text_input.html
View File

@ -5,13 +5,14 @@
<textinput
name='{{ field.name }}'
validation='{{ validation }}'
{% if paragraph %}paragraph='true'{% endif %}
{% if field.data %}initial-value='{{ field.data }}'{% endif %}
{% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
key='{{ field.name }}'
inline-template>
<div
v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph }]">
<label for={{field.name}}>
<div class="usa-input__title">{{ field.label | striptags }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div>

12
templates/requests/screen-1.html
View File

@ -28,7 +28,7 @@
{{ TextInput(f.jedi_usage, paragraph=True, placeholder="Briefly describe how you are expecting to use the JEDI Cloud. \n e.g. We are migrating XYZ application to the cloud so that...") }}
<h2>Cloud Readiness</h2>
{{ TextInput(f.num_software_systems,validation="integer",tooltip="A software system can be any code that you plan to host on cloud infrastructure. For example, it could be a custom-developed web application, or a large ERP system.",placeholder="42") }}
{{ TextInput(f.num_software_systems,validation="integer",tooltip="A software system can be any code that you plan to host on cloud infrastructure. For example, it could be a custom-developed web application, or a large ERP system.",placeholder="0") }}
{{ OptionsInput(f.jedi_migration, tooltip="Cloud migration is the process of moving data, applications or other business elements from an organization\\'s onsite computers/data centers to the cloud, or moving them from one cloud environment to another.") }}
<transition name='slide'>
@ -54,7 +54,7 @@
</transition>
<h2>Financial Usage</h2>
{{ TextInput(f.estimated_monthly_spend, tooltip="Refer to financial verification step help docs", validation="dollars", placeholder="$42,000") }}
{{ TextInput(f.estimated_monthly_spend, tooltip="Refer to financial verification step help docs", validation="dollars", placeholder="$0") }}
<div class='alert alert-info'>
<div class='alert__content'>
@ -68,14 +68,14 @@
<template v-if="annualSpend > 1000000">
<fieldset class='form__sub-fields'>
<h3>Because the approximate annual spend is over $1,000,000, please answer a few additional questions.</h3>
{{ TextInput(f.number_user_sessions, validation='integer', placeholder="42") }}
{{ TextInput(f.average_daily_traffic, tooltip="Requests are the client-to-server network traffic that is being transferred to your systems",validation="integer", placeholder="42") }}
{{ TextInput(f.average_daily_traffic_gb, tooltip="GB uploaded is the gigabyte amount of data traffic that is being transferred to your systems",validation="gigabytes", placeholder="42GB") }}
{{ TextInput(f.number_user_sessions, validation='integer', placeholder="0") }}
{{ TextInput(f.average_daily_traffic, tooltip="Requests are the client-to-server network traffic that is being transferred to your systems",validation="integer", placeholder="0") }}
{{ TextInput(f.average_daily_traffic_gb, tooltip="GB uploaded is the gigabyte amount of data traffic that is being transferred to your systems",validation="gigabytes", placeholder="0GB") }}
</fieldset>
</template>
</transition>
{{ TextInput(f.dollar_value, validation='dollars', placeholder="$42,000") }}
{{ TextInput(f.dollar_value, validation='dollars', placeholder="$0") }}
{{ TextInput(f.start_date, validation='date', placeholder='MM / DD / YYYY') }}
</div>