Support additional field types for WET-BOEW inline form validation

Created on 9 September 2025, about 1 month ago

Problem/Motivation

After testing the new WET-BOEW inline form validation feature in parent ticket, there have been some field types identified with issues.

Problematic field types:

  • Checkbox (single)
  • Checkboxes (multiple)
  • Radios

Current rendering for required fields:

Steps to reproduce

Install WxT 6.1.2, add a webform and enable the new "Enable WET-BOEW inline validation" option in the Settings tab. Add the problematic fields and look at webform.

Feature request
Status

Active

Version

6.1

Component

Code

Created by

🇨🇦Canada smulvih2 Canada 🍁

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @smulvih2
  • 🇨🇦Canada smulvih2 Canada 🍁
  • 🇨🇦Canada smulvih2 Canada 🍁

    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

  • 🇨🇦Canada smulvih2 Canada 🍁
  • 🇨🇦Canada smulvih2 Canada 🍁

    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 from submit, so 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.

Production build 0.71.5 2024