From cb306cefd5f7ca714dc9225dc95233afe4d0f2cd Mon Sep 17 00:00:00 2001
From: Dan Remollino <dan@danremollino.dev>
Date: Sun, 6 Apr 2025 16:39:05 -0400
Subject: [PATCH] added support for setting a maximum number of selections in a
 check group

---
 index.html    |  3 +--
 validation.js | 24 +++++++++++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 62f0de3..55b2a6b 100644
--- a/index.html
+++ b/index.html
@@ -58,8 +58,7 @@
                                 <fieldset class="form-group">
                                     <legend>Check Group</legend>
                                     <span class="form-group__item">
-                                        <input data-validation='{"minCount": 2}' id="checkbox-1" type="checkbox" name="checks">
-                                        <!-- <input id="checkbox-1" type="checkbox" name="checks"> -->
+                                        <input data-validation='{"optional": true, "maxCount": 2}' id="checkbox-1" type="checkbox" name="checks">
                                         <label for="checkbox-1">Checkbox 1</label>
                                     </span>
                                     <span class="form-group__item">
diff --git a/validation.js b/validation.js
index cf5f291..367b75a 100644
--- a/validation.js
+++ b/validation.js
@@ -4,6 +4,7 @@ class ValidationField {
     isValid = null
     labelEl = null
     labelText = null
+    maxCount = null
     message = null
     messageOutputted = null
     minCount = null
@@ -100,6 +101,7 @@ class ValidationField {
                     this.validationInstance.multi[this.el.name] = {}
                     // this.validationInstance.multi[this.el.name].count = 0
                     this.validationInstance.multi[this.el.name].minCount = this.minCount ?? 1
+                    if (this.maxCount) this.validationInstance.multi[this.el.name].maxCount = this.maxCount
                 }
 
                 // if (this.el.checked) this.validationInstance.multi[this.el.name].count++
@@ -328,12 +330,24 @@ class Validation {
     }
 
     validateCheckbox(fieldInstance, nameAttrVal) {
-        let messageMod = fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount === 1 ? `choice is` : `choices are`
-        let message = `At least ${fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount} ${messageMod} required.`
+        const checkCount = this.form.querySelectorAll(`[name="${nameAttrVal}"]:checked`).length
 
-        if (this.form.querySelectorAll(`[name="${nameAttrVal}"]:checked`).length <
-            fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount) {
-            this.addError(fieldInstance, message)
+        // minCount only
+        if (!fieldInstance.validationInstance.multi[`${nameAttrVal}`].hasOwnProperty('maxCount')) {
+            if (checkCount < fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount) {
+                let messageMod = fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount === 1 ? `choice is` : `choices are`
+                let message = `At least ${fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount} ${messageMod} required.`
+                this.addError(fieldInstance, message)
+            }
+        }
+
+        // minCount and maxCount set
+        if (fieldInstance.validationInstance.multi[`${nameAttrVal}`].maxCount) {
+            if (checkCount < fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount ||
+                checkCount > fieldInstance.validationInstance.multi[`${nameAttrVal}`].maxCount) {
+                let message = `At least ${fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount}, and no more than ${fieldInstance.validationInstance.multi[`${nameAttrVal}`].maxCount} choices are required.`
+                this.addError(fieldInstance, message)
+            }
         }
     }