mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-20 01:36:00 +02:00
Merge branch 'za/1643-fix-duplicate-form-errors' of github.com:cisagov/manage.get.gov into rh/1500-domain-req-alt-req-same
This commit is contained in:
commit
30e41c00fc
2 changed files with 67 additions and 1 deletions
|
@ -259,10 +259,75 @@ function handleFormsetValidationClick(e, availabilityButton) {
|
|||
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, true);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Add event listener to the alternate domains input
|
||||
const alternateDomainsInputs = document.querySelectorAll('[auto-validate]');
|
||||
if (alternateDomainsInputs) {
|
||||
for (const domainInput of alternateDomainsInputs){
|
||||
domainInput.addEventListener('input', function() {
|
||||
removeFormErrors(domainInput, true);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
/**
|
||||
* 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, removeStaleAlerts=false){
|
||||
// Remove error message
|
||||
let errorMessage = document.getElementById(`${input.id}__error-message`);
|
||||
if (errorMessage) {
|
||||
errorMessage.remove();
|
||||
}else{
|
||||
return
|
||||
}
|
||||
|
||||
// Remove error classes
|
||||
if (input.classList.contains('usa-input--error')) {
|
||||
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');
|
||||
|
||||
// Remove error classes from parent div
|
||||
let parentDiv = label.parentElement;
|
||||
if (parentDiv) {
|
||||
parentDiv.classList.remove('usa-form-group--error');
|
||||
}
|
||||
}
|
||||
|
||||
if (removeStaleAlerts){
|
||||
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`) {
|
||||
alert.remove()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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){
|
||||
|
|
|
@ -48,6 +48,7 @@
|
|||
{% endwith %}
|
||||
{% endwith %}
|
||||
<button
|
||||
id="check-availability-button"
|
||||
type="button"
|
||||
class="usa-button usa-button--outline"
|
||||
validate-for="{{ forms.0.requested_domain.auto_id }}"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue