diff --git a/js/components/date_selector.js b/js/components/date_selector.js index 8e8f5327..311d5514 100644 --- a/js/components/date_selector.js +++ b/js/components/date_selector.js @@ -36,6 +36,7 @@ export default { month: this.initialmonth, year: this.initialyear, name: this.nameTag, + showValidation: false, } }, @@ -160,6 +161,8 @@ export default { methods: { onInput: function(e) { + this.showValidation = true + emitEvent('field-change', this, { value: this.formattedDate, name: this.name, diff --git a/js/components/options_input.js b/js/components/options_input.js index 48213378..6c82b39b 100644 --- a/js/components/options_input.js +++ b/js/components/options_input.js @@ -36,7 +36,7 @@ export default { const showError = (this.initialErrors && this.initialErrors.length) || false return { showError: showError, - showValid: !showError && !!this.initialValue, + showValid: false, validationError: this.initialErrors.join(' '), value: this.initialValue, } diff --git a/js/components/text_input.js b/js/components/text_input.js index ea210cb0..92c8c7e4 100644 --- a/js/components/text_input.js +++ b/js/components/text_input.js @@ -31,7 +31,6 @@ export default { type: Boolean, default: false, }, - insetForm: Boolean, }, data: function() { @@ -61,7 +60,7 @@ export default { this._checkIfValid({ value: this.value, invalidate: true, - showValidationIcon: !this.insetForm, + showValidationIcon: false, }) if (this.mask && this.validation !== 'email') { @@ -103,6 +102,8 @@ export default { onBlur: function(e) { if (!(this.optional && e.target.value === '')) { this._checkIfValid({ value: e.target.value.trim(), invalidate: true }) + } else if (this.modified && !this.optional) { + this._checkIfValid({ value: e.target.value.trim(), invalidate: true }) } this.value = e.target.value.trim() diff --git a/templates/components/date_picker.html b/templates/components/date_picker.html index 61c1889f..2774aec5 100644 --- a/templates/components/date_picker.html +++ b/templates/components/date_picker.html @@ -20,7 +20,7 @@ :optional='{{ optional | string | lower }}' inline-template> -
+
{{ label }} @@ -76,8 +76,13 @@
-
- {{ Icon("ok", classes="icon--green") }} +
+
+ {{ Icon("ok", classes="icon--green") }} +
+
+ {{ Icon("alert", classes="icon--red")}} +
diff --git a/templates/components/options_input.html b/templates/components/options_input.html index b7d8d858..38c964f5 100644 --- a/templates/components/options_input.html +++ b/templates/components/options_input.html @@ -1,7 +1,15 @@ {% from "components/icon.html" import Icon %} {% from "components/tooltip.html" import Tooltip %} -{% macro OptionsInput(field, tooltip, inline=False, label=True, show_validation=True, disabled=False, watch=False, optional=True) -%} +{% macro OptionsInput( + field, + tooltip, + inline=False, + label=True, + show_validation=True, + disabled=False, + watch=False, + optional=True) -%}
- {{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone') }} + {{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone', optional=phone_optional) }}
- {{ TextInput(phone_ext, validation='phoneExt')}} + {{ TextInput(phone_ext, validation='phoneExt', optional=extension_optional) }}
{%- endmacro %} diff --git a/templates/components/text_input.html b/templates/components/text_input.html index 51528970..1b7e5aa7 100644 --- a/templates/components/text_input.html +++ b/templates/components/text_input.html @@ -17,8 +17,7 @@ optional=True, showLabel=True, watch=False, - show_validation=True, - inset_form=False) -%} + show_validation=True) -%} diff --git a/templates/fragments/edit_user_form.html b/templates/fragments/edit_user_form.html index 56f61b80..473b8d3f 100644 --- a/templates/fragments/edit_user_form.html +++ b/templates/fragments/edit_user_form.html @@ -11,16 +11,16 @@
- {{ TextInput(form.first_name, validation='requiredField') }} + {{ TextInput(form.first_name, validation='requiredField', optional=False) }}
- {{ TextInput(form.last_name, validation='requiredField') }} + {{ TextInput(form.last_name, validation='requiredField', optional=False) }}
- {{ TextInput(form.email, validation='email') }} - {{ PhoneInput(form.phone_number, form.phone_ext) }} + {{ TextInput(form.email, validation='email', optional=False) }} + {{ PhoneInput(form.phone_number, form.phone_ext, phone_optional=False) }} {{ OptionsInput(form.service_branch) }} {{ OptionsInput(form.citizenship) }} diff --git a/templates/portfolios/admin.html b/templates/portfolios/admin.html index d451c9df..a4268f44 100644 --- a/templates/portfolios/admin.html +++ b/templates/portfolios/admin.html @@ -17,7 +17,7 @@ {{ portfolio_form.csrf_token }}
- {{ TextInput(portfolio_form.name, validation="portfolioName", inset_form=True) }} + {{ TextInput(portfolio_form.name, validation="portfolioName") }}
{{ SaveButton(text='Save', additional_classes='usa-button-big') }} diff --git a/templates/portfolios/applications/settings.html b/templates/portfolios/applications/settings.html index 4e7f0047..4fe5f75a 100644 --- a/templates/portfolios/applications/settings.html +++ b/templates/portfolios/applications/settings.html @@ -25,8 +25,8 @@

- {{ TextInput(application_form.name, inset_form=True) }} - {{ TextInput(application_form.description, paragraph=True, inset_form=True) }} + {{ TextInput(application_form.name) }} + {{ TextInput(application_form.description, paragraph=True) }}
{% if user_can(permissions.DELETE_APPLICATION) %}