From 353e2d518f158c678733fc7da834a7f2e2a8967e Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Wed, 17 Jan 2024 13:01:02 -0700 Subject: [PATCH 1/8] Update get-gov.js --- src/registrar/assets/js/get-gov.js | 61 +++++++++++++++++++++++++++++- 1 file changed, 60 insertions(+), 1 deletion(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index 68e8af69c..23e40858a 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -227,10 +227,69 @@ function handleValidationClick(e) { for(const button of activatesValidation) { button.addEventListener('click', handleValidationClick); } + + + // Add event listener to the "Check availability" button + const checkAvailabilityButton = document.getElementById('check-availability-button'); + if (checkAvailabilityButton) { + const targetId = checkAvailabilityButton.getAttribute('validate-for'); + const checkAvailabilityInput = document.getElementById(targetId); + checkAvailabilityButton.addEventListener('click', + function() { + removeFormErrors(checkAvailabilityInput) + } + ); + } + + // Add event listener to the alternate domains input + const alternateDomainsInputs = document.querySelectorAll('[auto-validate]'); + if (alternateDomainsInputs) { + for (const domainInput of alternateDomainsInputs){ + // Only apply this logic to alternate domains input + if (domainInput.classList.contains('alternate-domain-input')){ + domainInput.addEventListener('input', function() { + removeFormErrors(domainInput); + } + ); + } + } + } })(); /** - * Delete method for formsets that diff in the view and delete in the model (Nameservers, DS Data) + * Removes form errors surrounding a form input + */ +function removeFormErrors(input){ + console.log("in the function...") + // Remove error message + let errorMessage = document.getElementById(`${input.id}__error-message`); + if (errorMessage) { + errorMessage.remove(); + console.log("Error message removed") + }else{ + return + } + + // Remove error classes + if (input.classList.contains('usa-input--error')) { + input.classList.remove('usa-input--error'); + } + + let label = document.querySelector(`label[for="${input.id}"]`); + if (label) { + label.classList.remove('usa-label--error'); + + // Remove error classes from parent div + let parentDiv = label.parentElement; + if (parentDiv) { + parentDiv.classList.remove('usa-form-group--error'); + } + } +} + +/** + * Prepare the namerservers and DS data forms delete buttons + * We will call this on the forms init, and also every time we add a form * */ function removeForm(e, formLabel, isNameserversForm, addButton, formIdentifier){ From ac81ecd11a06e83a543229f1a5ff24be35eab4e7 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Thu, 18 Jan 2024 12:30:40 -0700 Subject: [PATCH 2/8] Remove logger --- src/registrar/assets/js/get-gov.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index 23e40858a..ad44f3d44 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -260,7 +260,6 @@ function handleValidationClick(e) { * Removes form errors surrounding a form input */ function removeFormErrors(input){ - console.log("in the function...") // Remove error message let errorMessage = document.getElementById(`${input.id}__error-message`); if (errorMessage) { From 4c5d8b2c55ab24ad3c8e0198630b75605430fcd0 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Thu, 18 Jan 2024 12:45:39 -0700 Subject: [PATCH 3/8] Update get-gov.js --- src/registrar/assets/js/get-gov.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index ad44f3d44..ee9b7165d 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -264,7 +264,6 @@ function removeFormErrors(input){ let errorMessage = document.getElementById(`${input.id}__error-message`); if (errorMessage) { errorMessage.remove(); - console.log("Error message removed") }else{ return } @@ -274,6 +273,7 @@ function removeFormErrors(input){ input.classList.remove('usa-input--error'); } + // Get the form label let label = document.querySelector(`label[for="${input.id}"]`); if (label) { label.classList.remove('usa-label--error'); From 0a1da49c33e6b43977ed57e0b58629a49078864c Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Thu, 18 Jan 2024 13:14:13 -0700 Subject: [PATCH 4/8] Logic to remove stale alerts --- src/registrar/assets/js/get-gov.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index ee9b7165d..bbf1791ed 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -236,7 +236,7 @@ function handleValidationClick(e) { const checkAvailabilityInput = document.getElementById(targetId); checkAvailabilityButton.addEventListener('click', function() { - removeFormErrors(checkAvailabilityInput) + removeFormErrors(checkAvailabilityInput, true); } ); } @@ -248,7 +248,7 @@ function handleValidationClick(e) { // Only apply this logic to alternate domains input if (domainInput.classList.contains('alternate-domain-input')){ domainInput.addEventListener('input', function() { - removeFormErrors(domainInput); + removeFormErrors(domainInput, true); } ); } @@ -259,7 +259,7 @@ function handleValidationClick(e) { /** * Removes form errors surrounding a form input */ -function removeFormErrors(input){ +function removeFormErrors(input, removeStaleAlerts=false){ // Remove error message let errorMessage = document.getElementById(`${input.id}__error-message`); if (errorMessage) { @@ -284,6 +284,16 @@ function removeFormErrors(input){ parentDiv.classList.remove('usa-form-group--error'); } } + + if (removeStaleAlerts){ + let staleAlerts = document.getElementsByClassName("usa-alert--error") + for (let alert of staleAlerts){ + // Don't remove the error associated with the input + if (alert.id !== `${input.id}--toast`) { + alert.remove() + } + } + } } /** From a9253b6689098dbe29723104feafe3d3dcdfeed7 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Thu, 18 Jan 2024 13:30:23 -0700 Subject: [PATCH 5/8] Update get-gov.js --- src/registrar/assets/js/get-gov.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index bbf1791ed..e2e116569 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -286,7 +286,7 @@ function removeFormErrors(input, removeStaleAlerts=false){ } if (removeStaleAlerts){ - let staleAlerts = document.getElementsByClassName("usa-alert--error") + let staleAlerts = Array.from(document.getElementsByClassName("usa-alert--error")) for (let alert of staleAlerts){ // Don't remove the error associated with the input if (alert.id !== `${input.id}--toast`) { From 3d7c651c72b8ff04abf85b0dedcb22ae5ca45690 Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Thu, 18 Jan 2024 13:31:18 -0700 Subject: [PATCH 6/8] Use querySelectorAll --- src/registrar/assets/js/get-gov.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index e2e116569..4a1ce005f 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -286,7 +286,7 @@ function removeFormErrors(input, removeStaleAlerts=false){ } if (removeStaleAlerts){ - let staleAlerts = Array.from(document.getElementsByClassName("usa-alert--error")) + let staleAlerts = document.querySelectorAll(".usa-alert--error") for (let alert of staleAlerts){ // Don't remove the error associated with the input if (alert.id !== `${input.id}--toast`) { From 8b6d2ea2c76b5322d279df95845ff08493fa987f Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:02:52 -0700 Subject: [PATCH 7/8] Add back id --- src/registrar/assets/js/get-gov.js | 11 ++++------- .../templates/application_dotgov_domain.html | 2 +- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index 4a1ce005f..375b9738f 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -245,13 +245,10 @@ function handleValidationClick(e) { const alternateDomainsInputs = document.querySelectorAll('[auto-validate]'); if (alternateDomainsInputs) { for (const domainInput of alternateDomainsInputs){ - // Only apply this logic to alternate domains input - if (domainInput.classList.contains('alternate-domain-input')){ - domainInput.addEventListener('input', function() { - removeFormErrors(domainInput, true); - } - ); - } + domainInput.addEventListener('input', function() { + removeFormErrors(domainInput, true); + } + ); } } })(); diff --git a/src/registrar/templates/application_dotgov_domain.html b/src/registrar/templates/application_dotgov_domain.html index bd3c4a473..223fa8179 100644 --- a/src/registrar/templates/application_dotgov_domain.html +++ b/src/registrar/templates/application_dotgov_domain.html @@ -79,7 +79,7 @@ {% endwith %} {% endwith %} -