https://www.creatio.com/modules/contrib/webform/js/webform.element.telephone.js?tltpnb

1/**
2 * @file
3 * JavaScript behaviors for Telephone element.
4 */
5
6(function ($, Drupal, drupalSettings, once) {
7  // @see https://github.com/jackocnr/intl-tel-input#options
8  Drupal.webform = Drupal.webform || {};
9  Drupal.webform.intlTelInput = Drupal.webform.intlTelInput || {};
10  Drupal.webform.intlTelInput.options = Drupal.webform.intlTelInput.options || {};
11
12  /**
13   * Initialize Telephone international element.
14   * @see http://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/is-valid-number.html
15   * @type {Drupal~behavior}
16   */
17  Drupal.behaviors.webformTelephoneInternational = {
18    attach: function (context) {
19      if (!$.fn.intlTelInput) {
20        return;
21      }
22
23      $(once('webform-telephone-international', 'input.js-webform-telephone-international', context)).each(function () {
24        var $telephone = $(this);
25
26        // Add error message container.
27        var $error = $('<strong class="error form-item--error-message">' + Drupal.t('Invalid phone number') + '</strong>').hide();
28        $telephone.closest('.js-form-item').append($error);
29
30        var options = {
31          // The utilsScript is fetched when the page has finished.
32          // @see \Drupal\webform\Plugin\WebformElement\Telephone::prepare
33          // @see https://github.com/jackocnr/intl-tel-input
34          utilsScript: drupalSettings.webform.intlTelInput.utilsScript,
35          nationalMode: false
36        };
37
38        // Parse data attributes.
39        if ($telephone.attr('data-webform-telephone-international-initial-country')) {
40          options.initialCountry = $telephone.attr('data-webform-telephone-international-initial-country');
41        }
42        if ($telephone.attr('data-webform-telephone-international-preferred-countries')) {
43          options.preferredCountries = JSON.parse($telephone.attr('data-webform-telephone-international-preferred-countries'));
44        }
45
46        options = $.extend(options, Drupal.webform.intlTelInput.options);
47
48        // Allow custom options.
49        if ($telephone.attr('data-options')) {
50          options = $.extend(true, options, JSON.parse($telephone.attr('data-options')));
51        }
52
53        $telephone.intlTelInput(options);
54
55        var reset = function () {
56          $telephone.removeClass('error');
57          $error.hide();
58        };
59
60        var validate = function () {
61          return Drupal.webformTelephoneInternationalValidate($telephone, $error);
62        };
63
64        $telephone.on('blur', function () {
65          reset();
66          validate();
67        });
68
69        $telephone.on('keyup change', reset);
70
71        // Check for a valid phone number on submit.
72        var $form = $(this.form);
73        $form.on('submit', function (event) {
74          if (!validate()) {
75            $telephone.focus();
76            event.preventDefault();
77
78            // On validation error make sure to clear submit the once behavior.
79            // @see Drupal.behaviors.webformSubmitOnce
80            // @see webform.form.submit_once.js
81            if (Drupal.behaviors.webformSubmitOnce) {
82              Drupal.behaviors.webformSubmitOnce.clear();
83            }
84          }
85        });
86      });
87    }
88  };
89
90  /**
91   * Validates a given telephone number within a webform.
92   *
93   * @param {jQuery} $telephone
94   *   A telephone element.
95   * @param {jQuery} $error
96   *   A error element.
97   *
98   * @returns {boolean}
99   *   Returns true if the telephone number is valid; otherwise, false.
100   */
101  Drupal.webformTelephoneInternationalValidate = function ($telephone, $error) {
102    if (!$telephone.val().trim() || $telephone.intlTelInput('isValidNumber') !== false) {
103      return true;
104    }
105
106    $telephone.addClass('error');
107    var placeholder = $telephone.attr('placeholder');
108    var message;
109    if (placeholder) {
110      message = Drupal.t('The phone number is not valid. (e.g. @example)', {'@example': placeholder});
111    }
112    else {
113      message = Drupal.t('The phone number is not valid.');
114    }
115    $error.html(message).show();
116    return false;
117  };
118
119})(jQuery, Drupal, drupalSettings, once);