This is a file that shows a formatted phone number based upon certain regular expressions to target certain areas.

phoneNumberValidation.js

let initMessageAids = (divOutput) => {

  let style = `
  <style>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  #phonePreviewContainer {
    position: relative;
    width: 200px;
    top: -35px;
    right: -435px;
  }

  #successPreview {
    background-color: #85d67b;
    padding: 5px;
    border-radius: 10px;
  }

  #errorPreview {
    background-color: #d66c6c;
    padding: 5px;
    border-radius: 10px;
  }

  input {
    border: 1px solid #e4e4e4;
    border-radius: 15px;
    padding: 10px;
    font-size: 14px;
  }

  input:focus {
    outline: 0;
  }

  .full--opacity {
    transform: translate(0,0);
    opacity: 0.65;
    transition: opacity 0.45s, transform 0.45s;
  }

  .faded--opacity {
    transform: translate(20px, 0);
    opacity: 0;
    transition: opacity 0.45s, transform 0.45s;
  }

  </style>
  `

  function formatPhoneNumberUS(s) {
    var s2 = ("" + s).replace(/\D/g, '');
    var m = s2.match(/^(\d{3})(\d{3})(\d{4})$/);
    return (!m) ? "" : "US: +1 (" + m[1] + ") " + m[2] + "-" + m[3];
  }

  function formatPhoneNumberCN(s) {
    var s2 = ("" + s).replace(/\D/g, '');
    var m = s2.match(/^(\d{3})(\d{3})(\d{4})$/);
    return (!m) ? "" : "CN: +86 " + m[1] + " " + m[2] + " " + m[3];
  }

  const makeStructure = ((div) => {
    // maxLength="10"
    div.innerHTML = `

    ${ style }

    <label for="phoneNumber">Please input a phone number with area code.</label>
    <input  type="text" id="phoneNumber" name="phoneNumber">
    <div id="phonePreviewContainer" class="faded--opacity">
        <div id="successPreview">
          <span>&#10003; </span><span id="phoneNumberPrinted"><span>
        </div>
        <div id="errorPreview">
          <span>&#10007; </span><span id="phoneNumberError"><span>
        </div>
    </div>
  `
    document.getElementById('phoneNumber').oninput = e => {
      let val = e.target.value;
      let phonePreviewContainer = document.querySelector('#phonePreviewContainer');
      let phoneNumberError = document.querySelector('#errorPreview');
      let phoneNumberPrinted = document.querySelector('#successPreview');

      if (val.length === 10) {
        document.querySelector('#phoneNumberPrinted').innerText = formatPhoneNumberUS(val);

        phoneNumberError.style.display = "none"
        phoneNumberPrinted.style.display = "block"

        phonePreviewContainer.classList.remove('faded--opacity')
        phonePreviewContainer.classList.add('full--opacity')
      } else if (val.length > 13) {

        document.querySelector('#phoneNumberError').innerText = "Too long phone number";

        phoneNumberError.style.display = "block"
        phoneNumberPrinted.style.display = "none"

        phonePreviewContainer.classList.remove('faded--opacity')
        phonePreviewContainer.classList.add('full--opacity')

      } else {
        phonePreviewContainer.classList.remove('full--opacity')
        phonePreviewContainer.classList.add('faded--opacity')
      }
    }

  })(divOutput);
};

initMessageAids(document.getElementById('phoneNumberOutput'))