Fix same error appearing multiple times

alphagov · Sep 17, 2024 · 3073a91 · 3073a91
1 parent 5c9609c
commit 3073a91
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git 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
@@ -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')
+  })
 })