lg-5157 address inline validation

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)}`));
       }
     });

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'] } %>
+    <div class="margin-bottom-4">
+      <%= f.input :address1,  label: t('idv.form.address1'), wrapper: false,
+                              required: true, maxlength: 255, input_html: { aria: { invalid: false }, value: @pii['address1'] } %>
+      <span class='usa-error-message margin-top-1 display-if-invalid display-if-invalid--value-missing margin-bottom-1' role='alert'>
+        <%= t('simple_form.required.text') %>
+      </span>
+    </div>
     <%= 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'] } %>
+    <div class="margin-bottom-4">
+      <%= 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'] } %>
+      <span class='usa-error-message margin-top-1 display-if-invalid display-if-invalid--value-missing margin-bottom-1' role='alert'>
+        <%= t('simple_form.required.text') %>
+      </span>
+    </div>
 
     <%= f.input :state, collection: us_states_territories,
                         label: t('idv.form.state'), required: true,
                         selected: @pii['state'] %>
-    <div class="tablet:grid-col-6">
+    <div class="tablet:grid-col-6 margin-bottom-4">
       <%# 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'] } %>
+      <span class='usa-error-message margin-top-1 display-if-invalid display-if-invalid--value-missing margin-bottom-1' role='alert'>
+        <%= t('simple_form.required.text') %>
+      </span>
+
+      <span class='usa-error-message margin-top-1 pattern-mismatch display-if-invalid display-if-invalid--pattern-mismatch margin-bottom-1' role='alert'>
+        <%= t('idv.errors.pattern_mismatch.zipcode') %>
+      </span>
     </div>
     <div class="margin-top-0">
       <button type="submit" class="usa-button usa-button--big usa-button--wide margin-top-2">

app/views/idv/gpo/_new_address.html.erb

@@ -4,10 +4,21 @@
       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, input_html: { aria: { invalid: false } }, maxlength: 255 %>
+  <div class="margin-bottom-4">
+    <%= f.input :address1, label: t('idv.form.address1'), wrapper: false,
+                           required: true, input_html: { aria: { invalid: false } }, maxlength: 255 %>
+    <span class='usa-error-message margin-top-1 display-if-invalid display-if-invalid--value-missing margin-bottom-1' role='alert'>
+      <%= t('simple_form.required.text') %>
+    </span>
+  </div>
   <%= f.input :address2, label: t('idv.form.address2'), required: false, maxlength: 255 %>
-  <%= f.input :city, label: t('idv.form.city'), required: true, maxlength: 255 %>
+
+  <div class="margin-bottom-4">
+    <%= f.input :city, label: t('idv.form.city'), wrapper: false, required: true, maxlength: 255 %>
+    <span class='usa-error-message margin-top-1 display-if-invalid display-if-invalid--value-missing margin-bottom-1' role='alert'>
+      <%= t('simple_form.required.text') %>
+    </span>
+  </div>
 
   <div class="clearfix margin-x-neg-1">
     <div class="sm-col sm-col-8 padding-x-1">
@@ -20,8 +31,15 @@
       <%# 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: { class: 'zipcode' } %>
+                            wrapper: false,
+                            pattern: '(\d{5}([\-]\d{4})?)' %>
+      <span class='usa-error-message margin-top-1 display-if-invalid display-if-invalid--value-missing margin-bottom-1' role='alert'>
+        <%= t('simple_form.required.text') %>
+      </span>
+
+      <span class='usa-error-message margin-top-1 pattern-mismatch display-if-invalid display-if-invalid--pattern-mismatch margin-bottom-1' role='alert'>
+        <%= t('idv.errors.pattern_mismatch.zipcode') %>
+      </span>
     </div>
   </div>
   <div class="margin-top-0">

config/locales/idv/en.yml

@@ -33,7 +33,7 @@ en:
         personal_key: 'Please enter your personal key for this account. Example:
           ABC1-DEF2-G3HI-J456'
         ssn: 'Your Social Security Number must be entered in as ###-##-####'
-        zipcode: 'Your zipcode must be entered in as #####-####'
+        zipcode: Enter a 5 or 9 digit ZIP code
       unsupported_otp_delivery_method: Select a method to receive a code.
     failure:
       attempts:

config/locales/idv/es.yml

@@ -35,7 +35,7 @@ es:
         personal_key: 'Introduzca su clave personal para esta cuenta. Ejemplo:
           ABC1-DEF2-G3HI-J456'
         ssn: 'Su número de Seguro Social debe ser ingresado como ### - ## - ####'
-        zipcode: 'Su código postal debe ser ingresado como #####-####'
+        zipcode: Ingresa un código postal de 5 o 9 dígitos
       unsupported_otp_delivery_method: Seleccione una manera de recibir un código.
     failure:
       attempts:

config/locales/idv/fr.yml

@@ -38,7 +38,7 @@ fr:
           exemple : ABC1-DEF2-G3HI-J456'
         ssn: 'Votre numéro de sécurité sociale doit être inscrit de cette façon :
           ###-##-####'
-        zipcode: 'Votre code ZIP doit être inscrit de cette façon : #####-####'
+        zipcode: Entrez un code postal à 5 ou 9 chiffres
       unsupported_otp_delivery_method: Sélectionnez une méthode pour recevoir un code.
     failure:
       attempts:

spec/javascripts/packs/form-validation-spec.js

@@ -57,7 +57,6 @@ describe('form-validation', () => {
         <input type="text" aria-label="required field" required class="field">
         <input type="text" aria-label="format" pattern="\\\\A\\\\d{5}(-?\\\\d{4})?\\\\z">
         <input type="text" aria-label="format unknown field" pattern="\\\\A\\\\d{5}(-?\\\\d{4})?\\\\z" class="field">
-        <input type="text" aria-label="format field" pattern="\\\\A\\\\d{5}(-?\\\\d{4})?\\\\z" class="field zipcode">
       </form>`;
 
     initialize(document.querySelector('form'));
@@ -83,9 +82,5 @@ describe('form-validation', () => {
     expect(formatUnknownField.validationMessage).to.not.be.empty.and.not.match(
       /^idv\.errors\.pattern_mismatch\./,
     );
-
-    const formatField = screen.getByLabelText('format field');
-    await userEvent.type(formatField, 'a');
-    expect(formatField.validationMessage).to.equal('idv.errors.pattern_mismatch.zipcode');
   });
 });