Validate Checkbox Groups on invalid events from other controls

app/javascript/constraint_validations/index.js

@@ -1,4 +1,4 @@
-import { isFieldElement, readValidationMessages } from "./util"
+import { isAriaInvalid, isFieldElement, readValidationMessages } from "./util"
 import CheckboxValidator from "./validators/checkbox_validator"
 
 const defaultOptions = {
@@ -83,7 +83,7 @@ export default class ConstraintValidations {
 
     for (const form of forms) {
       for (const element of Array.from(form.elements).filter(isFieldElement)) {
-        const serverRenderedInvalid = /true/i.test(element.getAttribute("aria-invalid"))
+        const serverRenderedInvalid = isAriaInvalid(element)
         const id = element.getAttribute("aria-errormessage")
         const errorMessageElement = document.getElementById(id)
         const validationMessage = errorMessageElement?.textContent

app/javascript/constraint_validations/util.js

@@ -2,6 +2,10 @@ export function isFieldElement(element) {
   return !element.disabled && "validity" in element && element.willValidate
 }
 
+export function isAriaInvalid(element) {
+  return element.getAttribute("aria-invalid") === "true"
+}
+
 export function readValidationMessages(input) {
   try {
     return JSON.parse(input.getAttribute("data-validation-messages")) || {}

app/javascript/constraint_validations/validators/checkbox_validator.js

@@ -1,7 +1,7 @@
-import { isFieldElement, readValidationMessages } from "../util"
+import { isAriaInvalid, isFieldElement, readValidationMessages } from "../util"
 
 export default class {
-  selector = "input[type=checkbox]:required"
+  selector = "input[type=checkbox]"
   ignoringMutations = false
 
   constructor(constraintValidations, predicate) {
@@ -13,15 +13,17 @@ export default class {
   }
 
   connect() {
+    this.element.addEventListener("invalid", this.handleInvalid, { capture: true, passive: true })
     this.mutationObserver.observe(this.element, {
       attributeFilter: ["required"],
       childList: true,
       subtree: true
     })
-    this.reportValidationMessages(this.element.querySelectorAll(this.selector))
+    this.reportValidationMessages(this.element.querySelectorAll(this.selector), isAriaInvalid)
   }
 
   disconnect() {
+    this.element.removeEventListener("invalid", this.handleInvalid, { capture: true, passive: true })
     this.mutationObserver.disconnect()
   }
 
@@ -30,8 +32,8 @@ export default class {
   }
 
   validate(target) {
-    const checkboxesInGroup = checkboxGroup(target).filter(isFieldElement)
-    const allRequired = checkboxesInGroup.every((checkbox) => checkbox.getAttribute("aria-required") === "true")
+    const checkboxesInGroup = checkboxGroup(target).filter(isCheckboxElement)
+    const allRequired = checkboxesInGroup.every((checkbox) => isRequired(checkbox))
     const someChecked = checkboxesInGroup.some((checkbox) => checkbox.checked)
 
     if (allRequired && someChecked) {
@@ -50,6 +52,18 @@ export default class {
 
   // Private
 
+  handleInvalid = ({ target }) => {
+    const checkboxes = new Set
+
+    for (const element of target.form.elements) {
+      if (isCheckboxElement(element) && this.willValidate(element)) {
+        checkboxes.add(element)
+      }
+    }
+
+    this.reportValidationMessages(checkboxes)
+  }
+
   handleMutation = (mutationRecords) => {
     if (this.ignoringMutations) return
 
@@ -61,22 +75,23 @@ export default class {
           target.removeAttribute("aria-required")
         }
       } else if (addedNodes.length) {
-        this.reportValidationMessages(addedNodes)
+        this.reportValidationMessages(addedNodes, isAriaInvalid)
       }
     }
   }
 
-  reportValidationMessages(nodes) {
+  reportValidationMessages(nodes, willReport = () => true) {
     const requiredCheckboxes = querySelectorAllNodes(this.selector, nodes)
 
     for (const checkbox of requiredCheckboxes) {
-      if (checkbox.required) {
+      if (isRequired(checkbox)) {
         const group = checkboxGroup(checkbox)
 
         if (this.willValidateGroup(group)) {
           for (const checkboxInGroup of group) {
             this.swapRequiredWithAriaRequired(checkboxInGroup)
-            if (checkboxInGroup.getAttribute("aria-invalid") === "true") {
+
+            if (willReport(checkboxInGroup)) {
               this.validate(checkboxInGroup)
             }
           }
@@ -138,3 +153,11 @@ function querySelectorAllNodes(selector, nodes, elements = new Set) {
 
   return Array.from(elements)
 }
+
+function isCheckboxElement(element) {
+  return isFieldElement(element) && element.type === "checkbox"
+}
+
+function isRequired(element) {
+  return element.required || element.getAttribute("aria-required") === "true"
+}

test/dummy/app/views/forms/new.html.erb

@@ -51,5 +51,6 @@
     <% end %>
   </fieldset>
 
+  <button>Validate and Submit</button>
   <button formnovalidate>Skip Validations</button>
 <% end %>