Focusing validation on individual form with one input

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");
 

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)

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 %}

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 %}

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 %}

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>

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");