Issue summary

After enabling webform_intl_tel_national_mode, the improved national-mode UX works, but client-side validation appears to stop working.

Example:

  • enable Webform telephone international mode
  • enable webform_intl_tel_national_mode
  • enter obvious invalid input such as letters
  • submit the form

Actual result:

  • no validation error is shown
  • invalid values can pass client-side validation

Expected result:

  • invalid values should still fail intlTelInput('isValidNumber') validation

Root cause

In the module’s JS override:

[webform_intl_tel_national_mode/js/webform.element.telephone.js]

the validation guard uses:

if ($telephone.text().trim()) {

But $telephone is an , so .text() is empty. For input elements this should be .val().

Because of that, the validation block never runs.

Proposed fix

Change:

if ($telephone.text().trim()) {

to:

if ($telephone.val().trim()) {

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

sja1 created an issue. See original summary.

danrod’s picture

Assigned: Unassigned » danrod
Status: Active » Needs review
danrod’s picture

Version: 1.0.0-alpha2 » 1.0.x-dev

danrod’s picture

Thanks, I created a MR with your patch and it works as expected, I also added a regular expression to accept phone numbers such as 012 345 6789, 1012 345 6789, and +1012 345 6789 but also not to accept invalid input such as letters. I'll merge this shortly.

danrod’s picture

Status: Needs review » Reviewed & tested by the community
danrod’s picture

Status: Reviewed & tested by the community » Fixed

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.

danrod’s picture

Assigned: danrod » Unassigned

Status: Fixed » Closed (fixed)

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