From 7e2a2bad8e7c9954bee314ec24c4e95cae7842ef Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Mon, 24 Mar 2025 12:33:01 -0700
Subject: [PATCH] update validation code

---
 app/assets/javascripts/validation.js          | 30 +++++++++----------
 app/main/forms.py                             |  5 ----
 .../components/components/radios/template.njk |  1 +
 .../set-free-sms-allowance.html               |  2 +-
 .../service-settings/set-message-limit.html   |  2 +-
 .../service-settings/set-rate-limit.html      |  2 +-
 .../service-settings/set-service-setting.html |  2 +-
 7 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/validation.js b/app/assets/javascripts/validation.js
index f7bb4e6a9..0f60fc299 100644
--- a/app/assets/javascripts/validation.js
+++ b/app/assets/javascripts/validation.js
@@ -38,7 +38,7 @@ function attachValidation() {
             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) {
@@ -46,21 +46,20 @@ function attachValidation() {
                     errorElement.id = errorId;
                     errorElement.classList.add("usa-error-message");
                     errorElement.setAttribute("aria-live", "polite");
+                    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 {
+                    } else {
                         input.insertAdjacentElement("afterend", errorElement);
-                      }                }
+                    }
+                }
 
                 if (input.type === "radio") {
-                    if (validatedRadioNames.has(input.name)) {
-                        return; // already validated this group
-                      }
-                      validatedRadioNames.add(input.name);
-                    // 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) {
@@ -87,19 +86,18 @@ function attachValidation() {
 
         inputs.forEach((input) => {
             input.addEventListener("input", function () {
-                const errorElement = document.getElementById(input.id ? `${input.id}-error` : `${input.name}-error`);
+                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 () {
-                    console.log(`Radio ${input.id} changed`);
-
-                    const groupError = document.getElementById(`${input.name}-error`)
-                        || document.getElementById(`${input.id}-error`);
-                    if (groupError) hideError(input, groupError);
+                    const errorElement = document.getElementById(`${input.name}-error`);
+                    if (errorElement) {
+                        hideError(input, errorElement);
+                    }
                 });
             }
         });
diff --git a/app/main/forms.py b/app/main/forms.py
index c39e9afb9..90a4409fc 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -781,9 +781,6 @@ def govuk_radios_field_widget(self, field, param_extensions=None, **kwargs):
     # returns either a list or a hierarchy of lists
     # depending on how get_items_from_options is implemented
     items = self.get_items_from_options(field)
-    is_field_required = False
-    if getattr(field, 'flags', None) and 'required' in field.flags:
-        is_field_required = True
 
     params = {
         "name": field.name,
@@ -796,8 +793,6 @@ def govuk_radios_field_widget(self, field, param_extensions=None, **kwargs):
         },
         "errorMessage": error_message,
         "items": items,
-        "required": is_field_required,
-
     }
 
     # extend default params with any sent in during instantiation
diff --git a/app/templates/components/components/radios/template.njk b/app/templates/components/components/radios/template.njk
index 234a7a4ca..ef1054c5f 100644
--- a/app/templates/components/components/radios/template.njk
+++ b/app/templates/components/components/radios/template.njk
@@ -56,6 +56,7 @@
     {% set itemHintId = id + '-item-hint' %}
     <div class="usa-radio">
       <input class="usa-radio__input" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
+      {{-" checked" if item.checked }}
       {{-" disabled" if item.disabled }}
       {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
       {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
diff --git a/app/templates/views/service-settings/set-free-sms-allowance.html b/app/templates/views/service-settings/set-free-sms-allowance.html
index 7dab5ee1d..ca7ffb6ca 100644
--- a/app/templates/views/service-settings/set-free-sms-allowance.html
+++ b/app/templates/views/service-settings/set-free-sms-allowance.html
@@ -14,7 +14,7 @@
 
 {% block maincolumn_content %}
 
-  {% call form_wrapper() %}
+  {% call form_wrapper(data_force_focus=True) %}
     {{ page_header('Free text message allowance') }}
     {{ form.free_sms_allowance }}
     {{ page_footer('Save') }}
diff --git a/app/templates/views/service-settings/set-message-limit.html b/app/templates/views/service-settings/set-message-limit.html
index 7fc632954..c96f22c69 100644
--- a/app/templates/views/service-settings/set-message-limit.html
+++ b/app/templates/views/service-settings/set-message-limit.html
@@ -14,7 +14,7 @@
 
 {% block maincolumn_content %}
 
-  {% call form_wrapper() %}
+  {% call form_wrapper(data_force_focus=True) %}
     {{ page_header('Message batch limit') }}
     {{ form.message_limit }}
     {{ page_footer('Save') }}
diff --git a/app/templates/views/service-settings/set-rate-limit.html b/app/templates/views/service-settings/set-rate-limit.html
index fa23f4bce..779c49678 100644
--- a/app/templates/views/service-settings/set-rate-limit.html
+++ b/app/templates/views/service-settings/set-rate-limit.html
@@ -14,7 +14,7 @@
 
 {% block maincolumn_content %}
 
-  {% call form_wrapper() %}
+  {% call form_wrapper(data_force_focus=True) %}
     {{ page_header('Rate limit') }}
     {{ form.rate_limit }}
     {{ page_footer('Save') }}
diff --git a/app/templates/views/service-settings/set-service-setting.html b/app/templates/views/service-settings/set-service-setting.html
index c78ab0c4f..963c2c6d9 100644
--- a/app/templates/views/service-settings/set-service-setting.html
+++ b/app/templates/views/service-settings/set-service-setting.html
@@ -15,7 +15,7 @@
 
   <div class="grid-row">
     <div class="grid-col-10">
-      {% call form_wrapper() %}
+      {% call form_wrapper(data_force_focus=True) %}
         {{ form.enabled(param_extensions={
           "fieldset": {
             "legend": {