From 94f881477e22a95df2d8904a907ea5e6cb9b53cf Mon Sep 17 00:00:00 2001
From: Jonathan Bobel <jonathan.bobel@gsa.gov>
Date: Mon, 3 Mar 2025 13:33:45 -0500
Subject: [PATCH] Focusing validation on individual form with one input

---
 app/assets/javascripts/validation.js       | 2 +-
 app/main/views/send.py                     | 2 +-
 app/templates/components/file-upload.html  | 2 +-
 app/templates/components/radios.html       | 2 +-
 app/templates/components/select-input.html | 2 +-
 app/templates/components/textbox.html      | 2 +-
 tests/javascripts/validation.test.js       | 4 ++--
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/validation.js b/app/assets/javascripts/validation.js
index d7ec7c5e2..bd556f0c4 100644
--- a/app/assets/javascripts/validation.js
+++ b/app/assets/javascripts/validation.js
@@ -24,7 +24,7 @@ function getFieldLabel(input) {
 
 // Attach validation logic to forms
 function attachValidation() {
-    const forms = document.querySelectorAll("form");
+    const forms = document.querySelectorAll("form.send-one-off-form");
     forms.forEach((form) => {
         const inputs = form.querySelectorAll("input, textarea, select");
 
diff --git a/app/main/views/send.py b/app/main/views/send.py
index 2b36e5723..d627497a1 100644
--- a/app/main/views/send.py
+++ b/app/main/views/send.py
@@ -167,7 +167,7 @@ def send_messages(service_id, template_id):
         # just show the first error, as we don't expect the form to have more
         # than one, since it only has one field
         first_field_errors = list(form.errors.values())[0]
-        error_message = '<span class="usa-error-message">'
+        error_message = '<span class="error message usa-error-message">'
         error_message = f"{error_message}{first_field_errors[0]}"
         error_message = f"{error_message}</span>"
         error_message = Markup(error_message)
diff --git a/app/templates/components/file-upload.html b/app/templates/components/file-upload.html
index 3c613a2c3..27989ee8f 100644
--- a/app/templates/components/file-upload.html
+++ b/app/templates/components/file-upload.html
@@ -20,7 +20,7 @@
         </span>
       {% endif %}
       {% if field.errors and show_errors %}
-        <span class="error-message">
+        <span class="error-message usa-error-message">
           {{ field.errors[0] }}
         </span>
       {% endif %}
diff --git a/app/templates/components/radios.html b/app/templates/components/radios.html
index f3db32cf7..b629bb871 100644
--- a/app/templates/components/radios.html
+++ b/app/templates/components/radios.html
@@ -32,7 +32,7 @@
      <legend class="form-label {% if bold_legend %}bold{% endif %}">
        {{ field.label.text }}
        {% if field.errors %}
-         <span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
+         <span class="error-message usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
            {{ field.errors[0] }}
          </span>
        {% endif %}
diff --git a/app/templates/components/select-input.html b/app/templates/components/select-input.html
index 47ec19c5d..be84aa232 100644
--- a/app/templates/components/select-input.html
+++ b/app/templates/components/select-input.html
@@ -52,7 +52,7 @@
           </span>
         {% endif %}
         {% if field.errors %}
-          <span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
+          <span class="error-message usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
             {{ field.errors[0] }}
           </span>
         {% endif %}
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index fa92d0cf8..de0f93b9f 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -32,7 +32,7 @@
       </div>
     {% endif %}
     {% if field.errors %}
-      <span id="{{ field.name}}-error" class="usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}" tabindex="-1" aria-live="assertive" role="alert">
+      <span id="{{ field.name}}-error" class="error-message usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}" tabindex="-1" aria-live="assertive" role="alert">
         <span class="usa-sr-only">Error:</span>
         {% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %}
       </span>
diff --git a/tests/javascripts/validation.test.js b/tests/javascripts/validation.test.js
index dc4bae435..fb6b1a67e 100644
--- a/tests/javascripts/validation.test.js
+++ b/tests/javascripts/validation.test.js
@@ -5,14 +5,14 @@ describe("Form Validation", () => {
 
   beforeEach(() => {
     document.body.innerHTML = `
-      <form class="test-form">
+      <form class="send-one-off-form">
         <label for="test-input">Test Input</label>
         <input id="test-input" name="testInput" type="text" />
         <button type="submit">Submit</button>
       </form>
     `;
 
-    form = document.querySelector(".test-form");
+    form = document.querySelector(".send-one-off-form");
     input = document.getElementById("test-input");
     submitButton = form.querySelector("button");