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.

WxT webform third-party setting for WET-BOEW inline validation

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

WET-BOEW inline field validation in action!

Comments

smulvih2 created an issue. See original summary.

smulvih2’s picture

Status: Active » Needs review

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

joseph.olstad’s picture

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.

smulvih2’s picture

WET-BOEW inline field validation demo

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 field 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

WxT webform config for special validation

smulvih2’s picture

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"
  }
}
smulvih2’s picture

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
joseph.olstad’s picture

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.
#3542483: Documentation for new WxT mode that enables WET-BOEW inline form validation for webforms

joseph.olstad’s picture

creditting

smulvih2’s picture

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:

WET-BOEW validation warning message

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

WET-BOEW validation enabled status message

smulvih2’s picture

Status: Needs review » Fixed

Included in 6.1.2.

joseph.olstad’s picture

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

smulvih2’s picture

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"
    },
    "drupal/wxt_bootstrap": {
         "3540545": "https://www.drupal.org/files/issues/2025-09-06/wxt_bootstrap--wet-boew-inline-validation--d10--3540545.patch"
    }
}

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.