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') %>
+