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

Steps to reproduce

  1. Create a new web form with the state-of-the-art wxt distribution.
  2. Put a prefix: '#prefix': '<div class="custom-wrapper wb-frmvld">'
  3. Put a suffix: '#suffix': '</div>'
  4. Adds conditions for a field, say a field's visibility depends on another field's options.
  5. Visit the web interface of the created form
  6. No conditions will work
  7. Remove suffix/prefix
  8. 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

joseph.olstad created an issue. See original summary.

joseph.olstad’s picture

Issue summary: View changes
joseph.olstad’s picture

Issue summary: View changes
joseph.olstad’s picture

Issue summary: View changes
joseph.olstad’s picture

Title: wet-boew wb-frmvld form validation without ruining/breaking events added by other javascript » wet-boew wb-frmvld form validation
joseph.olstad’s picture

Status: Active » Closed (works as designed)

Ok 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.

jamesyao’s picture

Hi @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?

joseph.olstad’s picture

Title: wet-boew wb-frmvld form validation » wet-boew wb-frmvld form validation on specified fields
Status: Closed (works as designed) » Active
jamesyao’s picture

wb-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.

joseph.olstad’s picture

@jamesyao, thanks for this bit of information, could help lead us to a fix. I will update the upstream issue

joseph.olstad’s picture

Version: 4.4.x-dev » 6.1.x-dev
Assigned: joseph.olstad » Unassigned
Issue summary: View changes
Status: Active » Fixed

This 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 :

div.wb-frmvld .select-wrapper {
  display: block;
}

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

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