Don't validate input[type="checkbox"]:disabled

When validating with `CheckboxValidator`, don't include `:disabled`
checkboxes when determining group validity.

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+*   Add support for opting-into Checkbox group `[required]` validation
+
+    *Sean Doyle*
+
 *   Ignore `[disabled]` fields while validating
 
     *Sean Doyle*

README.md

@@ -419,6 +419,8 @@ Then, render a group of `<input type="checkbox">` elements as `[required]`:
 </fieldset>
 ```
 
+Disabled form controls won't be validated.
+
 #### How it works
 
 To work-around the quirks of built-in support, `ConstraintValidations` monitors

app/javascript/constraint_validations/index.js

@@ -1,4 +1,4 @@
-import { readValidationMessages } from "./util"
+import { isFieldElement, readValidationMessages } from "./util"
 import CheckboxValidator from "./validators/checkbox_validator"
 
 const defaultOptions = {
@@ -188,7 +188,3 @@ function getValidationMessage(input) {
 
   return validationMessage || input.validationMessage
 }
-
-function isFieldElement(element) {
-  return !element.disabled && "validity" in element && element.willValidate
-}

app/javascript/constraint_validations/util.js

@@ -1,3 +1,7 @@
+export function isFieldElement(element) {
+  return !element.disabled && "validity" in element && element.willValidate
+}
+
 export function readValidationMessages(input) {
   try {
     return JSON.parse(input.getAttribute("data-validation-messages")) || {}

app/javascript/constraint_validations/validators/checkbox_validator.js

@@ -1,4 +1,4 @@
-import { readValidationMessages } from "../util"
+import { isFieldElement, readValidationMessages } from "../util"
 
 export default class {
   ignoringMutations = false
@@ -33,7 +33,7 @@ export default class {
   }
 
   validate(target) {
-    const checkboxesInGroup = checkboxGroup(target)
+    const checkboxesInGroup = checkboxGroup(target).filter(isFieldElement)
     const allRequired = checkboxesInGroup.every((checkbox) => checkbox.getAttribute("aria-required") === "true")
     const someChecked = checkboxesInGroup.some((checkbox) => checkbox.checked)
 

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

@@ -43,9 +43,10 @@
 
     <%= form.collection_check_boxes :multiple_required_checkbox, [
           ["1", "Multiple required checkbox #1"],
-          ["2", "Multiple required checkbox #2"]
+          ["2", "Multiple required checkbox #2"],
+          ["3", "Multiple required checkbox #3", disabled: true]
         ], :first, :second do |builder| %>
-      <%= builder.check_box %>
+      <%= builder.check_box builder.object.third.to_h %>
       <%= builder.label %>
     <% end %>
   </fieldset>

test/system/validations_test.rb

@@ -289,13 +289,17 @@ class ValidationsTest < ApplicationSystemTestCase
   end
 
   test "observes connection of multiple [required] checkboxes" do
+    connected = proc do |input|
+      input.assert_matches_selector :element, required: false, "aria-required": "true"
+    end
+
     visit new_form_path(hotwire_enabled: true, checkbox: true)
     click_button "Skip Validations"
 
     within_fieldset "Multiple [required] checkboxes" do
-      assert_unchecked_field "Multiple required checkbox", exact: false, valid: false, count: 2 do |input|
-        input.assert_matches_selector :element, required: false, "aria-required": "true"
-      end
+      assert_unchecked_field "Multiple required checkbox #1", valid: false, &connected
+      assert_unchecked_field "Multiple required checkbox #2", valid: false, &connected
+      assert_unchecked_field "Multiple required checkbox #3", disabled: true, valid: true, &connected
     end
   end