update validation code

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 {
                         input.insertAdjacentElement("afterend", errorElement);
-                      }                }
+                    }
+                }
 
                 if (input.type === "radio") {
-                    if (validatedRadioNames.has(input.name)) {
+                    if (validatedRadioNames.has(input.name)) return;
-                        return; // already validated this group
-                      }
                     validatedRadioNames.add(input.name);
-                    // Find all radio buttons with the same name
+                    const radioGroup = form.querySelectorAll(`input[name="${input.name}"]`);
-                    const radioGroup = document.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 errorElement = document.getElementById(`${input.name}-error`);
-
+                    if (errorElement) {
-                    const groupError = document.getElementById(`${input.name}-error`)
+                        hideError(input, errorElement);
-                        || document.getElementById(`${input.id}-error`);
+                    }
-                    if (groupError) hideError(input, groupError);
                 });
             }
         });

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

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

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') }}

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') }}

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') }}

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": {