0

como podría validar un numero telefónico que tenga el + al inicio. Mejor dicho que el + siempre este al inicio en el input por mas que el usuario la quiera borrar siempre se inserta como primer caracter del número

mi código:

$(function() {
  $(document).on('change', '#mySelect', function() {
    $("#phone").focus();
    var value = $(this).val();
    $('#phone').val(value);

  });
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<p> Numero celular internacional
  <p/>
  <select id="mySelect">
    <option value="+54">Argentina +54</option>
    <option value="+591">Bolivia +591</option>
    <option value="+55">Brasil +55</option>
    <option value="+56">Chile +56</option>
    <option value="+593">Ecuador +593</option>
    <option value="+502">Guatemala +502</option>
    <option value="+52">México +52</option>
    <option value="+507">Panamá +507</option>
    <option value="+51">Perú +51</option>
    <option value="+598">Uruguay +598</option>
    <option value="+58">Venezuela +58</option>
  </select>

  <input id="phone" value="+" type="text" name="phone" pattern="\x2b[0-9]+" size="20" placeholder="+54976284353">

Si el usuario quiere escribir sin buscar el el select que se mantenga el + no se deje borra.

2
  • Qué tal con un readonly="readonly" como atributo del input?...
    – Candelo
    Commented el 12 ene. 2019 a las 19:40
  • @Candelo, lo que recomiendas no sería lo adecuado, ya que eso deshabilita la edición del input. Además el atributo readonly no se usa de la forma que propones, no se le asigna ningún valor. Puedes ver la documentación de HTML <input> readonly Attribute. Saludos. Commented el 12 ene. 2019 a las 20:13

2 respuestas 2

1

podrias hacer algo por el estilo :

var regex = /[^+\d]/g;

//JQuery
$("#telefono").keyup(function(){
   if($("#telefono").val() == ""){
       $("#telefono").val("+")
   }
   $("#telefono").val($("#telefono").val().replace(regex, ""))
});

//Javascript

var numTel = document.getElementById("telefono2");

numTel.addEventListener("keyup", function(){
    if (numTel.value == ""){
       numTel.value = "+";
    }
    numTel.value = numTel.value.replace(regex,"");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
JQuery:
<input id="telefono" value="+">
<br>
<br> Javascript: 
<input id="telefono2" value="+">

en este caso lo que hace la exprecion regular es : permitir unicamente los digitos y el +.

espero que te sea de ayuda, exitos

0

Tal vez no sea prudente que el símbolo + se inserte obligatoriamente a pesar que el usuario lo borre. No es una buena práctica de diseño. Lo que debes hacer es poner el placeholder que funcione como una sugerencia.

Además puedes usar el atributo pattern para validar que los caracteres introducidos sean solo numéricos y que permitan el simbolo + sólo al principio, esto lo logras usando una expresión regular.

Pudieras hacerlo así:

<input type="text" placeholder="+581245567890" pattern="\x2b[0-9]+" required>

La expresión regular anterior indica los siguiente:

\x2b es el carácter + escapado en su valor hexadecimal ASCII. Aqui indica que debe ir al inicio de tu input obligatoriamente.

[0-9] indica que solo acepta caractéres del 0 al 9

+ indica que los caractéres del 0 al 9 pueden repetirse en cualquier orden.

De esta forma no debes escribir un script para comprobar tu input. Ya HTML nos regala esto para concentrarnos en otras cosas un poco más importantes.

Por último una acotación, usas de forma incorrecta el atributo required en tu codigo HTML, ya que le estás asignando un valor.

Espero que esto te sea de ayuda.

EDICION:

Incluyo a continuación código que puedes probar:

function myFunction() {
  window.alert('Input validado');
}
<form action="#" onsubmit="myFunction()">
    <label htmlFor="phone">Escriba un número de teléfono</label>
    <input id="phone" type="text" name="phone" pattern="\x2b[0-9]+" size="20" placeholder="+54976284353" required>
    <button type="submit">Validar</button>
</form>

Espero que ahora te quede un poco más claro.

Saludos

2
  • Mauricio C. gracias por tu tiempo he editado el codigo input agregando tu aporte pero no funciona. como debería de usar lo que sugieres. <input id="phone" value="+" type="text" name="phone" pattern="\x2b[0-9]+" size="20" placeholder="+54976284353">al escribir no valida. Commented el 12 ene. 2019 a las 20:28
  • @CésarRodríguezReyes, acabo de actualizar la respuesta para incluir código que puedes probar. Te comento lo siguiente: estás estableciendo un value="+" y eso rompe el pattern, debes quitar ese atributo para que la validación funcione. Puedes ver el código que puse en la respuesta. Recuerda también usar el atributo required, porque sino al validar un input vacío el pattern devolverá match y pasará la validación. Saludos Commented el 12 ene. 2019 a las 21:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.