Problem/Motivation

When using a telephone element on a webform without setting the "placeholder" attribute, a javascript error is thrown upon validation: "Uncaught TypeError: str is undefined"

Steps to reproduce

Add a telephone element to a webform, do not specify a placeholder. Fill out the form with an incorrect phone number, the validation error message triggers the js error.

Proposed resolution

In webform.element.telephone.js:

if (!$telephone.intlTelInput('isValidNumber')) {
  $telephone.addClass('error');
  var message = Drupal.t('The phone number is not valid. (e.g. @example)', {'@example': $telephone.attr('placeholder')});
  $error.html(message).show();
  return false;
}

Ensure that the placeholder attribute exists/has a value, otherwise do not use it as argument for the message.

Remaining tasks

Write patch, review, test, commit.

User interface changes

The validation error message might change a bit if there is no placeholder attribute

API changes

None.

Data model changes

None.

Comments

mr.baileys created an issue. See original summary.

mr.baileys’s picture

Issue summary: View changes
jrockowitz’s picture

StatusFileSize
new4.71 KB
new949 bytes
new949 bytes

I am not able to replicate this issue using the attached webform.

Attached is a patch that should solve this issue.

jrockowitz’s picture

Status: Active » Needs review
paulocs’s picture

I could not reproduce the error because every country I choose seems to have placeholders.
I tried to reproduce it using both webforms attached above but no success.

Anyway I did a review in the patch and I see no problem to commit as it only checks if the placeholder is set or not.
I'll not move to RTBC because I was not able to reproduce the error.

jrockowitz’s picture

StatusFileSize
new5 KB

The attached webform replicates the issue by disabling the placeholder.

The patch also fixes the issue.

jrockowitz’s picture

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

Status: Reviewed & tested by the community » Fixed

  • jrockowitz authored 5a617ee on 8.x-5.x
    Issue #3214708 by jrockowitz: Javascript error when telephone element...

  • jrockowitz authored 5a617ee on 6.x
    Issue #3214708 by jrockowitz: Javascript error when telephone element...

Status: Fixed » Closed (fixed)

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