Steps to reproduce

1. Create a webform with 2 pages
2. On first page, add a checkbox and a telephone element with international support
3. Make the telephone element be visible only when the checkbox is checked.
4. Second page can contain anything
5. View the webform, check the checkbox, fill in a valid phone number
6. Move to the next step, then go back to previous page
7. Notice that the phone element shows a validation error

This happens because when the phone element becomes visible using due to States API, blur event is getting triggered which in turn triggers validation on the phone element.

Since the intl-tel-input utils script is loaded asynchronously (see #3032455), validation is not correctly done and causes the error message to become visible under the phone element.

page_1:
  '#type': wizard_page
  '#title': 'Page 1'
  show_tel:
    '#type': checkbox
    '#title': 'Show tel'
  phone:
    '#type': tel
    '#title': Phone
    '#states':
      visible:
        ':input[name="show_tel"]':
          checked: true
    '#international': true
page_2:
  '#type': wizard_page
  '#title': 'Page 2'

Issue fork webform-3519674

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

stefan.butura created an issue. See original summary.

stefan.butura’s picture

Issue summary: View changes
stefan.butura’s picture

StatusFileSize
new561 bytes

I noticed that isValidNumber returns null when the validation library is not yet loaded, and false when validation actually fails. I believe we should not show a validation error when validation library is not correctly loaded.

jrockowitz’s picture

I agree with the conclusion in #3

https://intl-tel-input.com/examples/validation-practical.html

If isValidNumber returns false and you'd like more detail, you can then use the getValidationError method to get more information. This method returns an error code (integer), which you can then map to your own custom error message, as in the example below.

  • d4dc5e73 committed on 6.3.x
    [#3519674] feat: Telephone validation issues when using states and pages...
jrockowitz’s picture

Status: Active » Fixed

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

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

Maintainers, please credit people who helped resolve this issue.

  • d4dc5e73 committed on 6.x
    [#3519674] feat: Telephone validation issues when using states and pages...

Status: Fixed » Closed (fixed)

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