darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-23 07:46:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/GSA/notifications-admin into 2041-csv-upload-more-instructions

Browse Source
This commit is contained in:
Jonathan Bobel
2025-04-04 11:29:31 -04:00
parent 96890199f3 82934daa02
commit b8b7c2df69
83 changed files with 2056 additions and 1940 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/javascripts/validation.js
View File

@@ -7,13 +7,17 @@ function showError(input, errorElement, message) {
errorElement.textContent = message;
}, 10);
input.classList.add("usa-input--error");
if (input.type !== "radio" && input.type !== "checkbox") {
input.classList.add("usa-input--error");
}
input.setAttribute("aria-describedby", errorElement.id);
}
function hideError(input, errorElement) {
errorElement.style.display = "none";
input.classList.remove("usa-input--error");
if (input.type !== "radio" && input.type !== "checkbox") {
input.classList.remove("usa-input--error");
}
input.removeAttribute("aria-describedby");
}
@@ -24,16 +28,17 @@ function getFieldLabel(input) {
// Attach validation logic to forms
function attachValidation() {
const forms = document.querySelectorAll("form.send-one-off-form");
const forms = document.querySelectorAll('form[data-force-focus="True"]');
forms.forEach((form) => {
const inputs = form.querySelectorAll("input, textarea, select");
form.addEventListener("submit", function (event) {
let isValid = true;
let firstInvalidInput = null;
const validatedRadioNames = new Set();
inputs.forEach((input) => {
const errorId = input.id ? `${input.id}-error` : `${input.name}-error`;
const errorId = input.type === "radio" ? `${input.name}-error` : `${input.id}-error`;
let errorElement = document.getElementById(errorId);
if (!errorElement) {
@@ -41,16 +46,24 @@ function attachValidation() {
errorElement.id = errorId;
errorElement.classList.add("usa-error-message");
errorElement.setAttribute("aria-live", "polite");
input.insertAdjacentElement("afterend", errorElement);
errorElement.style.display = "none";
if (input.type === "radio") {
const group = form.querySelectorAll(`input[name="${input.name}"]`);
const lastRadio = group[group.length - 1];
lastRadio.parentElement.insertAdjacentElement("afterend", errorElement);
} else {
input.insertAdjacentElement("afterend", errorElement);
}
}
if (input.type === "radio") {
// Find all radio buttons with the same name
const radioGroup = document.querySelectorAll(`input[name="${input.name}"]`);
if (validatedRadioNames.has(input.name)) return;
validatedRadioNames.add(input.name);
const radioGroup = form.querySelectorAll(`input[name="${input.name}"]`);
const isChecked = Array.from(radioGroup).some(radio => radio.checked);
if (!isChecked) {
showError(input, errorElement, `Error: ${getFieldLabel(input)} must be selected.`);
showError(input, errorElement, `Error: A selection must be made.`);
isValid = false;
if (!firstInvalidInput) {
firstInvalidInput = input;
@@ -73,11 +86,20 @@ function attachValidation() {
inputs.forEach((input) => {
input.addEventListener("input", function () {
const errorElement = document.getElementById(`${input.id}-error`);
if (input.value.trim() !== "" && errorElement) {
const errorId = input.type === "radio" ? `${input.name}-error` : `${input.id}-error`;
const errorElement = document.getElementById(errorId);
if (errorElement && input.value.trim() !== "") {
hideError(input, errorElement);
}
});
if (input.type === "radio") {
input.addEventListener("change", function () {
const errorElement = document.getElementById(`${input.name}-error`);
if (errorElement) {
hideError(input, errorElement);
}
});
}
});
});
}

18
app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View File

@@ -591,11 +591,25 @@ td.table-empty-message {
.big-number-smallest {
font-size: units(3);
}
.pill-item__label {
color: white;
}
&:not(.pill-item--selected):hover {
background: color('blue-warm-70v');
.pill-item__label {
color: white;
}
}
&.pill-item--selected:hover {
color: color('blue-60v');
&.pill-item--selected {
.pill-item__label {
color: color('blue-60v');
}
&:hover {
.pill-item__label {
color: color('blue-60v');
}
}
}
}
}