AI-Generated: Yes (Claude Code was used to help draft this issue summary. I reviewed it.)

Problem/Motivation

A telephone element with "Enhance support for international phone numbers" is still validated on submit when #states hides it. With an invalid value, js/webform.element.telephone.js cancels the submit and puts "The phone number is not valid." under the hidden element. The user sees nothing and cannot submit the form. With clientside_validation there is a message at the top of the form, but it points to a field that is not visible.

Webform clears the value when #states hides an element, so this happens when "Clear value(s) when hidden" is off, or when a value arrives after the element was hidden (browser autofill, a password manager, a script). The same happens when the #states are on a container around the element.

Steps to reproduce

Drupal 11.4.12, Webform 6.3.1.

  1. Create a webform with:
    show_phone:
      '#type': checkbox
      '#title': 'Show phone'
    phone:
      '#type': tel
      '#title': Phone
      '#international': true
      '#states_clear': false
      '#states':
        visible:
          ':input[name="show_phone"]':
            checked: true
    
  2. Check "Show phone" and type +31 6 12.
  3. Uncheck "Show phone".
  4. Submit. Nothing happens and no error is visible.

Proposed resolution

Skip the submit validation for an element hidden by #states and clear its value, like #states_clear does. Elements on an inactive card or in a closed <details> are still validated.

Remaining tasks

Review the MR.

User interface changes

None.

API changes

None.

Data model changes

None.

Issue fork webform-3637676

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

magnolia61 created an issue. See original summary.

magnolia61’s picture

Status: Active » Needs review
shank115’s picture

Tested MR !977 on Webform 6.3.x / Drupal 11.4

Before the MR, I can reproduce the bug: with "Show phone" unchecked and an invalid number in the hidden field, submit does nothing.

After: the form submits as expected. The MR fixes the issue.

One thing I noticed while testing: since the MR clears the value with $telephone.val(''), a valid hidden number (e.g. +31 6 12345678) is also saved as empty when #states_clear: false is set. Without the MR, that value is kept, because the server skips clearing for #states_clear: false elements. I'm not sure whether that's intended, so I'm leaving it for the maintainers to decide whether the value should be kept or only the validation skipped.

Leaving at Needs review.