Form Validation: Limit custom validation reset to own 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'];
+const PATTERN_TYPES = ['personal-key'];
 
 const snakeCase = (string) => string.replace(/[ -]/g, '_').replace(/\W/g, '').toLowerCase();
 
@@ -24,7 +24,10 @@ function kebabCase(string) {
 }
 
 function resetInput(input) {
-  input.setCustomValidity('');
+  if (input.hasAttribute('data-form-validation-message')) {
+    input.setCustomValidity('');
+    input.removeAttribute('data-form-validation-message');
+  }
   input.setAttribute('aria-invalid', 'false');
   input.classList.remove('usa-input--error');
 }
@@ -56,11 +59,13 @@ function checkInputValidity(event) {
   const { I18n } = /** @type {typeof window & LoginGovGlobal} */ (window).LoginGov;
   if (input.validity.valueMissing) {
     input.setCustomValidity(I18n.t('simple_form.required.text'));
+    input.setAttribute('data-form-validation-message', '');
   } else if (input.validity.patternMismatch) {
     PATTERN_TYPES.forEach((type) => {
       if (input.classList.contains(type)) {
         // i18n-tasks-use t('idv.errors.pattern_mismatch.personal_key')
         input.setCustomValidity(I18n.t(`idv.errors.pattern_mismatch.${snakeCase(type)}`));
+        input.setAttribute('data-form-validation-message', '');
       }
     });
   }

app/views/users/phone_setup/index.html.erb

@@ -16,7 +16,7 @@
   <% end %>
 </p>
 
-<%= simple_form_for(
+<%= validated_form_for(
       @new_phone_form,
       html: { autocomplete: 'off', method: :patch },
       data: { international_phone_form: true },

app/views/users/phones/add.html.erb

@@ -14,7 +14,7 @@
   <% end %>
 </p>
 
-<%= simple_form_for(
+<%= validated_form_for(
       @new_phone_form,
       html: { autocomplete: 'off', method: :post },
       data: { international_phone_form: true },

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

@@ -57,6 +57,7 @@ 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-zA-Z0-9]{4}([ -])?){3}[a-zA-Z0-9]{4}" class="field personal-key">
       </form>`;
 
     initialize(document.querySelector('form'));
@@ -82,5 +83,50 @@ 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.personal_key');
+    await userEvent.type(formatField, 'aaa-aaaa-aaaa-aaaa');
+    expect(formatField.validationMessage).to.be.empty();
+  });
+
+  it('resets its own custom validity message on input', () => {
+    document.body.innerHTML = `
+      <form>
+        <input type="text" aria-label="required field" required class="field">
+        <button>Submit</button>
+      </form>`;
+
+    const form = document.querySelector('form');
+    initialize(form);
+
+    form.checkValidity();
+
+    const input = screen.getByLabelText('required field');
+    userEvent.type(input, 'a');
+
+    expect(input.validity.customError).to.be.false();
+  });
+
+  it('does not reset external custom validity message on input', () => {
+    document.body.innerHTML = `
+      <form>
+        <input type="text" aria-label="field" class="field">
+        <button>Submit</button>
+      </form>`;
+
+    const form = document.querySelector('form');
+    initialize(form);
+
+    form.checkValidity();
+
+    /** @type {HTMLInputElement} */
+    const input = screen.getByLabelText('field');
+    input.setCustomValidity('custom error');
+
+    userEvent.type(input, 'a');
+
+    expect(input.validity.customError).to.be.true();
   });
 });