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'
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | 3519674-validate-only-visible-phone-3.patch | 561 bytes | stefan.butura |
Issue fork webform-3519674
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 #2
stefan.butura commentedComment #3
stefan.butura commentedI 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.
Comment #4
jrockowitz commentedI agree with the conclusion in #3
https://intl-tel-input.com/examples/validation-practical.html
Comment #7
jrockowitz commented