Enable WET-BOEW inline form validation for webforms

Created on 9 August 2025, 2 months ago

Problem/Motivation

A client requested to have WET-BOEW inline form validation available for webforms as seen here - https://wet-boew.github.io/v4.0-ci/demos/formvalid/formvalid-en.html

Steps to reproduce

Normally to get this to work you would have to override the webform.html.twig file in your custom theme to wrap the <form> element with <div class="wb-frmvld">. You would also need to adjust some field templates to get the label markup inline with WET-BOEW's JavaScript/CSS expectations.

Proposed resolution

Add a third-party setting to webforms via wxt_ext_webform, a simple checkbox to enable/disable per webform.

With this setting enabled on a webform, inline field validation works as expected.

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 🍁

    Two PRs for this feature, one for drupalwxt/wxt that adds the third-party setting to webforms and wraps the webform in the expected markup when enabled - https://github.com/drupalwxt/wxt/pull/331

    The other PR is for drupalwxt/wxt_bootstrap, which modifies the field label markup to align with what WET-BOEW expects. This includes changes to the required field marker - https://github.com/drupalwxt/wxt_bootstrap/pull/34

  • 🇨🇦Canada joseph.olstad

    I added a comment to the PR 34 in wxt_bootstrap. We can test this out a bit more and see what happens in wild environments.

  • 🇨🇦Canada smulvih2 Canada 🍁

    I pushed a few small changes to the two PR branches. Mostly around fixing display issues of webform fields and their labels during validation (shifting elements). I also tested additional firld types, specifically email, number, phone number, date, and select list.

    I also tested adding data-* attributes to webform fields via the webform UI. Specifically, for special validation rules found here - https://wet-boew.github.io/wet-boew/docs/ref/formvalid/formvalid-en.html#SpecializedValidation

    Example: for the phone number field type, adding the below to the Advanced tab on the webform field config enables the special validation

  • 🇨🇦Canada smulvih2 Canada 🍁

    For anyone who wants to test this or use in their project, add the following to your composer.json file:

    "patches": {
      "drupalwxt/wxt": {
        "WET-BOEW inline field validation": "https://patch-diff.githubusercontent.com/raw/drupalwxt/wxt/pull/331.patch"
      }
      "drupalwxt/wxt_bootstrap": {
        "WET-BOEW inline field validation": "https://patch-diff.githubusercontent.com/raw/drupalwxt/wxt_bootstrap/pull/34.patch"
      }
    }
    
  • 🇨🇦Canada smulvih2 Canada 🍁

    Took a while to get the drupalwxt/wxt PR tests passing in GitHub. Needed the following changes to get the PR working:

    • Update GitHub action for pr to run against PHP8.3 to fix build error
    • Replace the statcan/actions/composer@master step with a direct composer CLI command inside existing runner environment, which already has PHP 8.3 set up via setup-php
    • Update drupal/redis patch
    • Issue #3536150 by joseph.olstad: linkit patch used by WxT was merged upstream
    • Issue #3524839: Remove patch for layout_builder_st rolled into 2.0.x
    • Remove second layout_builder_st patch rolled into 2.0.x
    • Patch core to fix failing PHPUnit kernel tests
    • Update core patch #3500238 to fix third PHPUnit kernel test failure
  • 🇨🇦Canada joseph.olstad

    Nice work on the special validation as illustrated in comment #4. Would be good to follow up with a documentation insert for this. I've created a new stub issue for that.
    📌 Documentation for new WET-BOEW inline form validation for webforms Active

  • 🇨🇦Canada smulvih2 Canada 🍁

    If the wxt_ext_webform module is enabled, you will now see a warning message on the Build tab for a webform that doesn't have the WET-BOEW validation enabled:

    When the WET-BOEW validation is enabled, a status message is displayed with information about special validation and a link to the details:

  • 🇨🇦Canada smulvih2 Canada 🍁

    Included in 6.1.2.

  • 🇨🇦Canada joseph.olstad

    Wow great job, I'll close the related documentation issue as fixed. I really like this touch!

  • 🇨🇦Canada smulvih2 Canada 🍁

    I have a request to back-port this feature to D10 WxT (5.4.x). Attached are two patches (wxt, wxt_bootstrap) taken from the GitHub PRs and re-rolled to drupalwxt/wxt 5.4.x and drupalwxt/wxt_bootstrap 8x-8.x. I don't think we will include this in the 5.4.x branch, but people can use these patches until they upgrade to wxt 6.1.x.

    Here are the changes to composer.json needed to bring this feature into 5.4.x:

    "patches": {
        "drupalwxt/wxt": {
            "3540545": "https://www.drupal.org/files/issues/2025-09-06/wxt--wet-boew-inline-validation--d10--3540545.patch"
        },
        "drupalwxt/wxt_bootstrap": {
             "3540545": "https://www.drupal.org/files/issues/2025-09-06/wxt_bootstrap--wet-boew-inline-validation--d10--3540545.patch"
        }
    }
    
Production build 0.71.5 2024