LG-10052 Validate Zip Code on "Enter the information on your state‑issued ID" page

app/views/idv/in_person/state_id.html.erb

@@ -189,13 +189,16 @@
   <% end %>
   <% if capture_secondary_id_enabled %>
     <div class="tablet:grid-col-8 margin-bottom-5">
+      <%# using :tel for mobile numeric keypad %>
       <%= render ValidatedFieldComponent.new(
-            name: :identity_doc_zipcode,
+            as: :tel,
+            error_messages: { patternMismatch: t('idv.errors.pattern_mismatch.zipcode') },
             form: f,
-            input_html: { value: pii[:identity_doc_zipcode] },
+            input_html: { value: pii[:identity_doc_zipcode], class: 'zipcode' },
             label: t('in_person_proofing.form.state_id.zipcode'),
             label_html: { class: 'usa-label' },
-            maxlength: 255,
+            name: :identity_doc_zipcode,
+            pattern: '\d{5}([\-]\d{4})?',
             required: true,
           ) %>
     </div>
@@ -229,4 +232,4 @@
 <% else %>
   <%= render 'idv/doc_auth/cancel', step: 'state_id' %>
 <% end %>
-<%= javascript_packs_tag_once('puerto-rico-guidance') %>
+<%= javascript_packs_tag_once('formatted-fields', 'puerto-rico-guidance') %>

spec/features/idv/steps/in_person/state_id_step_spec.rb

@@ -0,0 +1,43 @@
+require 'rails_helper'
+
+RSpec.describe 'doc auth IPP state ID step', js: true do
+  include IdvStepHelper
+  include InPersonHelper
+
+  before do
+    allow(IdentityConfig.store).to receive(:in_person_proofing_enabled).and_return(true)
+  end
+
+  context 'capture secondary id is enabled' do
+    before do
+      allow(IdentityConfig.store).
+        to(receive(:in_person_capture_secondary_id_enabled)).
+        and_return(true)
+    end
+
+    it 'validates zip code input', allow_browser_log: true do
+      user = user_with_2fa
+
+      sign_in_and_2fa_user(user)
+      begin_in_person_proofing(user)
+      complete_prepare_step(user)
+      complete_location_step(user)
+      expect(page).to have_current_path(idv_in_person_step_path(step: :state_id), wait: 10)
+      fill_out_state_id_form_ok(double_address_verification: true, same_address_as_id: true)
+      # blank out the zip code field
+      fill_in t('in_person_proofing.form.state_id.zipcode'), with: ''
+      # try to enter invalid input into the zip code field
+      fill_in t('in_person_proofing.form.state_id.zipcode'), with: 'invalid input'
+      expect(page).to have_field(t('in_person_proofing.form.state_id.zipcode'), with: '')
+      # enter valid characters, but invalid length
+      fill_in t('in_person_proofing.form.state_id.zipcode'), with: '123'
+      click_idv_continue
+      expect(page).to have_css('.usa-error-message', text: t('idv.errors.pattern_mismatch.zipcode'))
+      # enter a valid zip and make sure we can continue
+      fill_in t('in_person_proofing.form.state_id.zipcode'), with: '123456789'
+      expect(page).to have_field(t('in_person_proofing.form.state_id.zipcode'), with: '12345-6789')
+      click_idv_continue
+      expect(page).to have_current_path(idv_in_person_step_path(step: :ssn))
+    end
+  end
+end