Support additional field types for WET-BOEW inline form validation

Here are the fields with the proper rendering.

You can pull these changes from this PR until merged - https://github.com/drupalwxt/wxt_bootstrap/pull/35

Here is the fix for the checkbox/checkboxes/radios when the error is triggered:

So far there is only one major issue with the WET-BOEW field validation integration with webforms, this is with the checkboxes field. WET-BOEW expects all checkboxes in a group to have the same name attribute on each <input> element, like this:

<fieldset class="chkbxrdio-grp">
    <legend class="required">
        <span class="field-name">Favourite pets</span> <strong class="required">(required)</strong>
    </legend>

    <div class="checkbox">
        <label for="animal1">
            <input type="checkbox" name="animal" value="1" id="animal1" data-rule-required="true"> Dog
        </label>
    </div>
    <div class="checkbox">
        <label for="animal2">
            <input type="checkbox" name="animal" value="2" id="animal2"> Cat
        </label>
    </div>
    ...
</fieldset>

You can see from this example, WET-BOEW expects all input elements to have the same name="animal". With webforms, the name attribute is unique and used to save the value on form submit, so it can't easily be changed. Here is the same field in webforms (some attributes removed for brevity):

<fieldset class="chkbxrdio-grp">
    <legend class="required">
        <span class="fieldset-legend">Select from the following</span><strong class="required">(required)</strong>
    </legend>

    <div class="fieldset-wrapper">  
        <div class="form-item checkbox">
            <label for="edit-select-from-the-following-1">
                <input class="form-checkbox" type="checkbox" id="edit-select-from-the-following-1" name="select_from_the_following[1]" value="1"><span class="field-name">Option 1</span>
            </label>
        </div>
    </div>
    <div class="fieldset-wrapper">  
        <div class="form-item checkbox">
            <label for="edit-select-from-the-following-2">
                <input class="form-checkbox" type="checkbox" id="edit-select-from-the-following-2" name="select_from_the_following[2]" value="2"><span class="field-name">Option 2</span>
            </label>
        </div>
    </div>
    ...
</fieldset>

You can see here that each input element gets a unique name attribute, which can't be changed or will cause submission failure. Not sure the best way to approach this issue, maybe WET-BOEW has a workaround for this, but nothing I can find.

Symptoms: When the checkboxes group is required, and you submit the form with the field blank, you get the error message as expected. Only selecting the first checkbox in the array will clear the message, although if you save the form it will then remove the message if another checkbox in the array is selected.

I added a PR for drupalwxt/wxt that handles conditional fields in webforms. The conditional fields work with the wet-boew validation, the only issue I noticed was they were not getting the proper required markers. This is because the required markers are added server-side via twig templates. I added a JavaScript file to a library that only gets loaded on webforms that have the wet-boew validation enabled. I tested this against normal fields with a <label> element, as well as grouped fields with a <legend>.

Pull requests:
drupal/wxt_bootstrap: https://github.com/drupalwxt/wxt_bootstrap/pull/35
drupalwxt/wxt: https://github.com/drupalwxt/wxt/pull/332

Video attached showing the handling of conditionally-visible required fields. JS is needed since conditional fields uses JS on the front-end which bypasses the templates for the required markers.

Here are patches for Drupal 10 WxT with all of the WET-BOEW validation from the parent ticket, as well as the new fixes for grouped fields (checkbox, checkboxes, radios) and conditional fields.

"patches": {
    "drupalwxt/wxt": {
        "3545573": "https://www.drupal.org/files/issues/2025-09-25/wxt--wet-boew-inline-validation--d10--3545573-13.patch"
    },
    "drupal/wxt_bootstrap": {
         "3545573": "https://www.drupal.org/files/issues/2025-09-25/wxt_bootstrap--wet-boew-inline-validation--d10--3545573-13.patch"
    }
}

Finally fixed the checkbox group validation issue!

Initially, when enabling WET-BOEW inline validation in Drupal WxT, checkbox groups (#type: checkboxes) were not validating correctly.
Only the first checkbox in the group would remove the validation error once selected, while checking any other box would leave the error message active.

This caused real usability issues, if a user selected only the second or third option, the form still showed a “This field is required” error and could not be submitted.

Initial Analysis

In the default WET example, all checkboxes in a required group share the same name (e.g. name="animal"), which allows the jQuery Validate require_from_group rule to treat them as one logical field.

However, in Drupal Webforms, each checkbox has a distinct name for submission purposes, such as:

name="animal[dog]"
name="animal[cat]"
name="animal[fish]"

Because of these unique names, the validator treated each input as a separate required field, so only the first checkbox’s change event satisfied the validation rule, the others continued to trigger “required” errors.

First Attempt

I added a shared CSS class and data-rule-require_from_group attributes in a preprocess hook to make WET recognize the grouped checkboxes.

Example attributes added by preprocess:

$variables['attributes']->addClass('js-wet-group-animal');
$variables['attributes']->setAttribute('data-rule-require_from_group', '[1,".js-wet-group-animal"]');
$variables['attributes']->setAttribute('data-rule-required', 'false');

This correctly enforced “at least one checked” behavior across all boxes, but introduced a new problem:
each checkbox still rendered its own inline validation message and corresponding entry in the WET summary, producing multiple duplicate errors for the same fieldset.

Final Fix

To resolve this, I implemented a client-side enhancement (webform_checkboxes_group.js) that hooks into WET’s jQuery Validate instance once initialized.

The script:

1. Discovers grouped checkboxes by inspecting names like animal[dog] that include data-rule-require_from_group.
2. Registers them as a single validation group using v.settings.groups.
3. Prevents duplicate inline labels by only allowing the first checkbox in each group to receive a visible error label.
4. De-duplicates WET’s top error summary by filtering the validator’s errorList and errorMap to keep only one entry per checkbox base name.
5. Ensures proper prevention of submission when invalid, covering all submit and Enter-key cases.

Result

• Only one inline error appears for a checkbox group.
• The error summary lists one item for the group.
• Any checkbox in the group can now clear the error as expected.

Edit: Made a small improvement after pulling this into a project. When checkboxes in a group use accented characters OR spaces in the option keys, this causes an issue with the checkbox group fix.

I have updated the two PRs in this ticket with these changes:

wxt_bootstrap: https://github.com/drupalwxt/wxt_bootstrap/pull/35
wxt: https://github.com/drupalwxt/wxt/pull/332

Drupal 10 PRs

These are the PRs to get this fix in Drupal 10. Please note, we need to update to wet-boew/wet-boew 4.0.85 in WxT 5.4.x in order to ensure wet-boew validation for checkbox group works as expected.

Edit: Made a small improvement after pulling this into a project. When checkboxes in a group use accented characters in the option key, this caused an issue with the checkbox group fix. This renders a name="animal[écureuil]", which was causing the checkbox group fix to break.

wxt_bootstrap: https://github.com/drupalwxt/wxt_bootstrap/pull/36
wxt: https://github.com/drupalwxt/wxt/pull/333

Drupal 11 Patches

Adding patches to use in my project for D11, with the latest fix for checkbox groups using special characters and spaces in their options key.

Included with 6.1.3.

In WxT 5.x the patches/PRs in #15 are still required since we are not adding this feature to 5.x.

See this feature in action here (with conditional fields) - https://agriculture.canada.ca/en/form/accessibility-feedback-form