From 3073a9109e0fcafb34e53a5067169e731efee8cb Mon Sep 17 00:00:00 2001
From: Hugo Jeffreys <hugo.jeffreys@digital.cabinet-office.gov.uk>
Date: Wed, 28 Aug 2024 10:00:26 +0100
Subject: [PATCH] Fix same error appearing multiple times

---
 .../javascripts/browsered/form-validation.js  |  8 +++++++-
 .../card-details-page-validation.test.cy.js   | 19 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/browsered/form-validation.js b/app/assets/javascripts/browsered/form-validation.js
index c579cf8a1..17bfb5b8f 100644
--- a/app/assets/javascripts/browsered/form-validation.js
+++ b/app/assets/javascripts/browsered/form-validation.js
@@ -125,7 +125,7 @@ var init = function () {
     var errorAnchor = document.createElement('a')
     errorAnchor.setAttribute('href', '#' + error.cssKey)
     errorAnchor.id = error.cssKey + '-error'
-    if(!document.getElementById(errorAnchor.id)){
+    if (!document.getElementById(errorAnchor.id)) {
       errorAnchor.innerText = error.value
       listElement.appendChild(errorAnchor)
       if (addType === 'append') {
@@ -192,8 +192,14 @@ var init = function () {
       if (isAnExpiryDateField) {
         expiryMonthElement.classList.remove(CSS_ERROR_CLASS)
         expiryYearElement.classList.remove(CSS_ERROR_CLASS)
+        if (document.getElementById('expiry-month-error')) {
+          document.getElementById('expiry-month-error').remove()
+        }
       } else {
         input.classList.remove(CSS_ERROR_CLASS)
+        if (document.getElementById(`${input.id}-error`)) {
+          document.getElementById(`${input.id}-error`).remove()
+        }
       }
     }
   }
diff --git a/test/cypress/integration/card/card-details-page-validation.test.cy.js b/test/cypress/integration/card/card-details-page-validation.test.cy.js
index 209da81e0..894c47e40 100644
--- a/test/cypress/integration/card/card-details-page-validation.test.cy.js
+++ b/test/cypress/integration/card/card-details-page-validation.test.cy.js
@@ -81,4 +81,23 @@ describe('Card details page validation', () => {
     cy.get('[data-cy=expiry-month]').not('have.class', 'govuk-input--error')
     cy.get('[data-cy=expiry-year]').not('have.class', 'govuk-input--error')
   })
+
+  it('Should remove summary field errors after clicking out of a correctly validated field', () => {
+    cy.task('setupStubs', createPaymentChargeStubs)
+    cy.visit(`/secure/${tokenId}`)
+
+    cy.location('pathname').should('eq', `/card_details/${chargeId}`)
+    cy.window().its('chargeId').should('eq', `${chargeId}`)
+    
+    // {backspace} Deletes character to the left of the cursor. Used as an empty string causes a Cypress error
+    cy.get('[data-cy=cardholder-name]').type('{backspace}')
+    cy.get('#card-details').submit()
+    
+    cy.get('#cardholder-name-error').should('exist')
+
+    cy.get('[data-cy=cardholder-name]').clear().type('Jeff')
+    cy.get('[data-cy=expiry-month]').click()
+
+    cy.get('#cardholder-name-error').should('not.exist')
+  })
 })