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.

Comments
Comment #2
smulvih2Two PRs for this feature, one for
drupalwxt/wxtthat adds the third-party setting to webforms and wraps the webform in the expected markup when enabled - https://github.com/drupalwxt/wxt/pull/331The 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/34Comment #3
joseph.olstadI 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.
Comment #4
smulvih2I 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#SpecializedValidationExample: for the phone number field type, adding the below to the Advanced tab on the webform field config enables the special validation
Comment #5
smulvih2For anyone who wants to test this or use in their project, add the following to your composer.json file:
Comment #6
smulvih2Took a while to get the drupalwxt/wxt PR tests passing in GitHub. Needed the following changes to get the PR working:
Comment #7
joseph.olstadNice 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
Comment #8
joseph.olstadcreditting
Comment #9
smulvih2If the
wxt_ext_webformmodule 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:
Comment #10
smulvih2Included in 6.1.2.
Comment #11
joseph.olstadWow great job, I'll close the related documentation issue as fixed. I really like this touch!
Comment #12
smulvih2I 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.xanddrupalwxt/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: