javascripthtmlformslibrariesintl-tel-input

I'm using intl-tel-input library with official phone number validation from the library but "valid" word still shows up even if the input is wrong

the image of the problem the word "valid" in my form is appear even if the input is too short or invalid. this is my code:

<html>
<head>
    <link rel="stylesheet" href="test2222.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
    <title>Document</title>
</head>
<body>
<form action="">
    <div id="phone_inputs">
    <input id="phone" type="tel">
    <button id="btn" type="button">Validate</button>
    <span id="valid-msg" class="hide">✓ Valid</span>
    <span id="error-msg" class="hide"></span>
</div>
</form>
</body>

<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
<script>
    const input = document.querySelector("#phone");
    const button = document.querySelector("#btn");
    const errorMsg = document.querySelector("#error-msg");
    const validMsg = document.querySelector("#valid-msg");
    const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
    
    const iti = window.intlTelInput(input, {
    utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js"
});
  const reset = () => {
  input.classList.remove("error");
  errorMsg.innerHTML = "";
  errorMsg.classList.add("hide");
  validMsg.classList.add("hide");
};

// on click button: validate
button.addEventListener('click', () => {
  reset();
  if (input.value.trim()) {
    if (iti.isPossibleNumber()) {
      validMsg.classList.remove("hide");
    } else {
      input.classList.add("error");
      const errorCode = iti.getValidationError();
      errorMsg.innerHTML = errorMap[errorCode];
      errorMsg.classList.remove("hide");
    }
  }
});
input.addEventListener('change', reset);
input.addEventListener('keyup', reset);
</script>
</html>

i tried to delete the word "valid" from the span tag, the result is the word "valid" not appear even if the input is valid, can you help me please?

Solution

  • You don't have the hide CSS class that the code requires in order to hide the message when it shouldn't be shown.

    Also (fyi), your script elements are in the wrong place. Nothing is allowed between the closing body tag and the closing html tag. Your script elements should go just BEFORE the closing body tag.

    Here is the working code. Note that this library not only validates the format of the phone number, but it will also validate the area code as being valid.

    <html>
<head>
    <link rel="stylesheet" href="test2222.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
    <title>Document</title>
    <style>
      .hide { display:none; }
    </style>
</head>
<body>
<form action="">
    <div id="phone_inputs">
    <input id="phone" type="tel">
    <button id="btn" type="button">Validate</button>
    <span id="valid-msg" class="hide">✓ Valid</span>
    <span id="error-msg" class="hide"></span>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
<script>
    const input = document.querySelector("#phone");
    const button = document.querySelector("#btn");
    const errorMsg = document.querySelector("#error-msg");
    const validMsg = document.querySelector("#valid-msg");
    const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
    
    const iti = window.intlTelInput(input, {
    utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js"
});
  const reset = () => {
  input.classList.remove("error");
  errorMsg.textContent = "";
  errorMsg.classList.add("hide");
  validMsg.classList.add("hide");
};

// on click button: validate
button.addEventListener('click', () => {
  reset();
  if (input.value.trim()) {
    if (iti.isValidNumber()) {
      validMsg.classList.remove("hide");
    } else {
      input.classList.add("error");
      const errorCode = iti.getValidationError();
      errorMsg.textContent = errorMap[errorCode];
      errorMsg.classList.remove("hide");
    }
  }
});
input.addEventListener('change', reset);
input.addEventListener('keyup', reset);
</script>
</body>
</html>