diff --git a/app/javascript/packs/form-validation.js b/app/javascript/packs/form-validation.js index 4b04d30bb9c..c555a027fc8 100644 --- a/app/javascript/packs/form-validation.js +++ b/app/javascript/packs/form-validation.js @@ -3,7 +3,7 @@ import { loadPolyfills } from '@18f/identity-polyfill'; /** @typedef {{t:(key:string)=>string, key:(key:string)=>string}} LoginGovI18n */ /** @typedef {{LoginGov:{I18n:LoginGovI18n}}} LoginGovGlobal */ -const PATTERN_TYPES = ['personal-key', 'ssn', 'zipcode']; +const PATTERN_TYPES = ['personal-key', 'ssn']; const snakeCase = (string) => string.replace(/[ -]/g, '_').replace(/\W/g, '').toLowerCase(); @@ -60,8 +60,6 @@ function checkInputValidity(event) { PATTERN_TYPES.forEach((type) => { if (input.classList.contains(type)) { // i18n-tasks-use t('idv.errors.pattern_mismatch.personal_key') - // i18n-tasks-use t('idv.errors.pattern_mismatch.ssn') - // i18n-tasks-use t('idv.errors.pattern_mismatch.zipcode') input.setCustomValidity(I18n.t(`idv.errors.pattern_mismatch.${snakeCase(type)}`)); } }); diff --git a/app/views/idv/address/new.html.erb b/app/views/idv/address/new.html.erb index 91b09f864ca..12cb676273a 100644 --- a/app/views/idv/address/new.html.erb +++ b/app/views/idv/address/new.html.erb @@ -18,23 +18,40 @@ :idv_form, url: idv_address_path, method: 'POST', html: {autocomplete: 'off', class: 'margin-top-2'} ) do |f| %> - - <%= f.input :address1, label: t('idv.form.address1'), wrapper_html: {class: 'margin-bottom-1'}, - required: true, maxlength: 255, input_html: { aria: { invalid: false }, value: @pii['address1'] } %> +
+ <%= f.input :address1, label: t('idv.form.address1'), wrapper: false, + required: true, maxlength: 255, input_html: { aria: { invalid: false }, value: @pii['address1'] } %> + + <%= t('simple_form.required.text') %> + +
<%= f.input :address2, label: t('idv.form.address2'), required: false, maxlength: 255, input_html: { value: @pii['address2'] } %> - <%= f.input :city, label: t('idv.form.city'), required: true, maxlength: 255, - input_html: { aria: { invalid: false }, value: @pii['city'] } %> +
+ <%= f.input :city, label: t('idv.form.city'), required: true, maxlength: 255, wrapper: false, + input_html: { aria: { invalid: false }, class: 'usa-input', value: @pii['city'] } %> + + <%= t('simple_form.required.text') %> + +
<%= f.input :state, collection: us_states_territories, label: t('idv.form.state'), required: true, selected: @pii['state'] %> -
+
<%# using :tel for mobile numeric keypad %> <%= f.input :zipcode, as: :tel, label: t('idv.form.zipcode'), required: true, pattern: '(\d{5}([\-]\d{4})?)', - input_html: { aria: { invalid: false }, class: 'zipcode', value: @pii['zipcode'] } %> + wrapper: false, + input_html: { aria: { invalid: false }, class: 'usa-input', value: @pii['zipcode'] } %> + + <%= t('simple_form.required.text') %> + + + + <%= t('idv.errors.pattern_mismatch.zipcode') %> +