From cc1e19b179139b8b824ef62a54b6a254d6a73c56 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Fri, 28 Apr 2023 12:29:42 -0400
Subject: [PATCH] Afform - Ensure checkboxes and radios are validated
 client-side

---
 ext/afform/core/ang/af/fields/CheckBox.html | 2 +-
 ext/afform/core/ang/af/fields/Radio.html    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ext/afform/core/ang/af/fields/CheckBox.html b/ext/afform/core/ang/af/fields/CheckBox.html
index ba9b8aac93..14c9249ffd 100644
--- a/ext/afform/core/ang/af/fields/CheckBox.html
+++ b/ext/afform/core/ang/af/fields/CheckBox.html
@@ -1,6 +1,6 @@
 <ul class="crm-checkbox-list" id="{{ fieldId }}" ng-if="$ctrl.defn.options">
   <li ng-repeat="opt in $ctrl.defn.options track by opt.id" >
-    <input type="checkbox" checklist-model="dataProvider.getFieldData()[$ctrl.fieldName]" id="{{ fieldId + opt.id }}" checklist-value="opt.id" />
+    <input type="checkbox" checklist-model="dataProvider.getFieldData()[$ctrl.fieldName]" ng-required="$ctrl.defn.required && !dataProvider.getFieldData()[$ctrl.fieldName].length" id="{{ fieldId + opt.id }}" checklist-value="opt.id" />
     <label for="{{ fieldId + opt.id }}">{{:: opt.label }}</label>
   </li>
 </ul>
diff --git a/ext/afform/core/ang/af/fields/Radio.html b/ext/afform/core/ang/af/fields/Radio.html
index 189fa309fd..e32ef716df 100644
--- a/ext/afform/core/ang/af/fields/Radio.html
+++ b/ext/afform/core/ang/af/fields/Radio.html
@@ -1,5 +1,5 @@
 <label ng-repeat="opt in getOptions() track by opt.id" >
-  <input class="crm-form-radio" type="radio" ng-model="getSetValue" ng-model-options="{getterSetter: true}" ng-value="opt.id" />
+  <input class="crm-form-radio" name="{{:: fieldId }}" type="radio" ng-model="getSetValue" ng-required="$ctrl.defn.required" ng-model-options="{getterSetter: true}" ng-value="opt.id" />
   {{:: opt.label }}
 </label>
 <a ng-if="!$ctrl.defn.required" class="crm-hover-button" title="{{:: ts('Clear') }}" ng-show="!!dataProvider.getFieldData()[$ctrl.fieldName] || dataProvider.getFieldData()[$ctrl.fieldName] === false || dataProvider.getFieldData()[$ctrl.fieldName] === 0" ng-click="dataProvider.getFieldData()[$ctrl.fieldName] = null">
-- 
2.25.1