Afform - Ensure checkboxes and radios are validated client-side

diff --git a/ext/afform/core/ang/af/fields/CheckBox.html b/ext/afform/core/ang/af/fields/CheckBox.html
index ba9b8aac933631fa0c69935d6133213b4db39cda..14c9249ffd620181f44f06c52d106a3a107850f3 100644 (file)
--- 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 189fa309fd667d9233b8adeebb92ed65cb04ff42..e32ef716df83e41bd3c0500de7245667bca43815 100644 (file)
--- 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">