Problem/Motivation
This form validation mode is now included in WxT 6.1.3+
Each webform now gets an optional WET-BOEW Form validation mode, enable it with a checkbox in each webform (settings).
Also need to ensure that clientside validation in the webform it'self is not disabled (again, webform settings).
To ensure it works you'll also need to uninstall the clientside_validation / webform_clientside_validation module(s) (If installed).
Original issue statement:
When a form is wrapped in
<div class="custom-wrapper wb-frmvld">'
</div>
This wrapped div when around a form that uses the wet-boew library, enables wet-boew form validation. This wet-boew form validation adds some interesting accessibility however it breaks features like webform conditionals provided by the Webform module designed for Drupal 9 or Drupal 10.
Additional context
- https://drupal.org/project/webform
- https://wet-boew.github.io/v4.0-ci/demos/formvalid/formvalid-en.html
- https://drupal.org/project/wxt
- https://github.com/wet-boew/wet-boew/issues/9498
Steps to reproduce
- Create a new web form with the state-of-the-art wxt distribution.
- Put a prefix:
'#prefix': '<div class="custom-wrapper wb-frmvld">' - Put a suffix:
'#suffix': '</div>' - Adds conditions for a field, say a field's visibility depends on another field's options.
- Visit the web interface of the created form
- No conditions will work
- Remove suffix/prefix
- Test again, all conditions will work as designed.
Proposed resolution
the build and compile instructions for wet-boew are here:
https://wet-boew.github.io/v4.0-ci/docs/start-en.html
I haven't tested these build/compile instructions yet but it's a good starting point.
See upstream issue:
https://github.com/wet-boew/wet-boew/issues/9498
Remaining tasks
Set up a wet-boew development build,
the build and compile instructions for wet-boew are here:
https://wet-boew.github.io/v4.0-ci/docs/start-en.html
Debug the functionality related to wb-frmvld (wet-boew form validation), pay attention particularly to any javascript that removes events, add event bindings/namespaces use namespaces for wet-boew that don't conflict with others, change the logic to remove the namespaced wet-boew events and regenerate the events using wet-boew namespaced events, do not remove existing events, examine if the DOM changes are breaking webform conditionals, debug and fix the problem
User interface changes
N/A
API changes
TBD
Comments
Comment #2
joseph.olstadComment #3
joseph.olstadComment #4
joseph.olstadComment #5
joseph.olstadComment #6
joseph.olstadOk I am unable to reproduce this issue, it is working as designed with wet-boew library v4.0.50
I'll re-open if needed, but I just added a conditional and it is working as expected.
Comment #7
jamesyao commentedHi @joseph.olstad, could you please keep the issue open?
I have experienced the conditional field's visible state issue with Checkbox, Checkboxes, Radio, and Radios type fields in the Webform which has the Form custom property wb-frmvld. When the visible state of a conditional field depends on a checked value of 4 type fields above, the conditional field is not shown in the Webform.
If the wb-frmvld is removed from the "Form custom properties" of Webform, the visible state of the conditional field works as expected.
In the fact that the the conditional field of Webform having wb-frmvld attribute works with select field type (dropdown).
Is it possible for wet-boew to break the conditional functionality of the checkbox and radio field types in the Webform?
Comment #8
joseph.olstadComment #9
jamesyao commentedwb-frmvlid of the wet-boew removes the events (change & state:checked) and events (change & state:value & keyup) from the field check and radio type in Webform, respectively.
It breaks the conditional functionality of Webform.
Comment #10
joseph.olstad@jamesyao, thanks for this bit of information, could help lead us to a fix. I will update the upstream issue
Comment #11
joseph.olstadThis form validation mode is now included in WxT 6.1.3+
I'm about to push a tweak.
Each webform now gets an optional WET-BOEW Form validation mode, enable it with a checkbox in each webform (settings).
Also need to ensure that clientside validation in the webform it'self is not disabled (again, webform settings).
.
To ensure it works you'll also need to uninstall the clientside_validation / webform_clientside_validation module(s) (If installed).
tweak to form css :