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.
- 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 - Check "Show phone" and type
+31 6 12. - Uncheck "Show phone".
- 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
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
Comment #3
magnolia61 commentedComment #4
shank115 commentedTested 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: falseis set. Without the MR, that value is kept, because the server skips clearing for#states_clear: falseelements. 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.