Telefono chile jquery

validar mediante jquery un numero de telefono en chile

by Reinventatuweb

HTML

<div class="container">
    <label for="telefono">Teléfono (Chile):</label>
    <input type="text" id="telefono" placeholder="Ejemplo: +56912345678">
    <span id="phone-error" class="error-message"></span>
  </div>

CSS

.container {
  margin: 20px;
}

.error-message {
  color: red;
  display: none;
  width:100%;
  float:left;
}

JavaScript

$(document).ready(function() {
$('#telefono').attr("placeholder","+56 telefono");

  $('#telefono').on('input', function() {
    var phoneNumber = $(this).val().trim().replace(/\+56/g, '');
    var formattedNumber = '+56' + phoneNumber.replace(/\D/g, '');
    
    $(this).val(formattedNumber);
    
    var numero = $(this).val();
    // var regex = /^(\+?56)?(\s?)(0?9)(\s?)[98765432]\d{7}$/;
    var regex = /^\+56\d{9}$/;

    if (!regex.test( numero)) {
      $('#phone-error').text('Número de teléfono inválido. Debe comenzar con "+56" y tener 9 dígitos').show();
    } else {
      $('#phone-error').hide();
    }
  });
});