Reading international telephone in HTML

Question

I am trying to get a user to input international phone number in HTML form, for it I am having to use JavaScript. I don't know JS, but after following a online blog I managed to cover some distance. But when I am trying to read the phone field it is displaying variable name instead of value. I think the problem is with this line of code in particular const phoneNumber = phoneInput.getNumber(); IDE saying it is a unresolved function.

Below is my file:

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!--International phone input field-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

  <!-- Bootstrap CSS -->
  <link th:rel="stylesheet" th:href="@{/webjars/bootstrap/5.1.1/css/bootstrap.min.css} " />

  <!-- font awesome-->
  <link th:rel="stylesheet" th:href="@{/webjars/font-awesome/5.15.4/css/all.css} " />

  <!--    local css file-->
  <link href="/static/css/register_login.css" rel="stylesheet" th:href="@{/css/register_login.css}" />

  <title>Easy Notifications App</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-xl-9 mx-auto">
        <div class="card flex-row my-5 border-0 shadow rounded-3 overflow-hidden">
          <div class="card-img-left d-none d-md-flex">
            <!-- Background image for card set in CSS! -->
          </div>
          <div class="card-body p-4 p-sm-5">
            <h5 class="card-title text-center mb-5 fw-light fs-5">Register</h5>

            <form id="login" onsubmit="process(event)" action="#" th:action="@{/register}" th:object="${registerDto}" method="post">

              <div class="form-floating mb-3">
                <input type="text" th:field="*{firstName}" class="form-control" id="floatingInputfirstName" placeholder="First Name" autofocus>
                <label for="floatingInputfirstName">First Name</label>
              </div>

              <div class="form-floating mb-3">
                <input type="text" th:field="*{lastName}" class="form-control" id="floatingInputlastName" placeholder="Last Name">
                <label for="floatingInputlastName">Last Name</label>
              </div>

              <div class="form-floating mb-3">
                <input type="tel" class="form-control" id="tel" th:field="*{mobileNumber}" placeholder="Mobile Number">
                <label for="tel"></label>
              </div>


              <div class="d-grid mb-2">
                <button class="btn btn-lg btn-primary btn-login fw-bold text-uppercase" type="submit">
                                    Register
                                </button>
              </div>

            </form>
            <div class="alert alert-info" style="display: none;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

<script>
  <!-- Initialize the phone plugin -->

  const phoneInputField = document.querySelector("#tel");
  const phoneInput = window.intlTelInput(phoneInputField, {
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
  });

  const info = document.querySelector(".alert-info");

  function process(event) {
    event.preventDefault();

    const phoneNumber = phoneInput.getNumber();

    info.style.display = "";
    info.innerHTML = 'Phone number in E.164 format: <strong>${phoneNumber}</strong>';
  }
</script>

</html>

And here is the picture of error message:

You can get any input value by just calling `.value` on that input — Rana, Oct 16 '21 at 16:17

score 1 · Accepted Answer · edited Oct 16 '21 at 19:17

1

Tried it and works with

info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;

Usage of the backtick character (`) in JavaScript

edited Oct 16 '21 at 19:17

kmoser

8,780
3
24
40

answered Oct 16 '21 at 18:37

Remus

26
2

score 0 · Answer 2 · answered Oct 16 '21 at 17:08

There's something wrong the way you want to concat strings. If you really want to use the curly brackets, it should be like this, with the "`" quote:

info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;

If you wanna use normal quote it can be done with the "+" operator:

info.innerHTML = "Phone number in E.164 format: <strong>" + phoneNumber + "</strong>";

Tested it and both should work.

score 0 · Answer 3 · answered Oct 16 '21 at 19:35

Validate Phone Number by pattern in your input HTML element. I think this is deprecated, but You can also use RegExp in Javascript.

See this Question

If you can get Phone Number value:

<form id="login" onsubmit="process(event)">
    <div class="form-floating mb-3">
        <input type="tel" class="form-control" id="tel" th:field="*{mobileNumber}" placeholder="Mobile Number">
        <label for="tel"></label>
    </div>
</form>

const process = (e) => {
    e.preventDefault();

    
    const phoneNumber = document.getElementById("tel").value;

    info.style.display = "";
    info.innerHTML = 'Phone number in E.164 format: <strong>${phoneNumber}</strong>';

Reading international telephone in HTML

3 Answers3