Validar campo de texto sólo letras, números con javascript

En algunos casos necesitaremos que el usuario sólo ingrese letras en un campo de texto impidiendo así el ingreso de números y caracteres especiales. Gracias a Javascript esto lo podremos hacer con el siguiente método que funciona sin problemas con todos los navegadores.

Pasos a seguir:

  1. Crear una lista con todas las letras permitidas (a,b,c ... etc).
  2. Crear una lista de teclas especiales tales como (BackSpace , flecha izquierda, flecha derecha, Supr) estas son teclas permitidas aparte de las teclas permitidas en el primer paso.
  3. Hacer uso de la propiedad IndexOf (Con esto verificamos si un caracter está dentro de otra cadena) .
  4. Hacer uso del evento onkeypress del campo de texto para hacer la llamada a la función que utilize los pasos 1,2 y 3.
Codigo

<script>
    function soloLetras(e){
       key = e.keyCode || e.which;
       tecla = String.fromCharCode(key).toLowerCase();
       letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
       especiales = "8-37-39-46";

       tecla_especial = false
       for(var i in especiales){
            if(key == especiales[i]){
                tecla_especial = true;
                break;
            }
        }

        if(letras.indexOf(tecla)==-1 && !tecla_especial){
            return false;
        }
    }
</script>

<input type="text" onkeypress="return soloLetras(event)">
  • En la línea 4 la sentencia String.fromCharCode(key) obteniene el caracter presionado por el usuario que añadiendo la sentencia toLowerCase() convertiríamos la letra a minúscula. Con esto guardamos la letra presionada por el usuario en la variable tecla (línea 4).
  • En la línea 5 guardamos en la variable "letras" las letras permitidas por nosotros. En la línea 6 guardamos los keyCode de las teclas especiales como (BackSpace , flecha izquierda, flecha derecha, Supr).
  • De la línea 8 a la 15 se busca si está la tecla presionada por el usuario en el array de teclas especiales "especiales"(línea 6)
  • En la línea 17 dentro del condicional hacemos uso de la propiedad indexOf() que averigua si una cadena se encuentra dentro de otra cadena devolviendo como valor la posición de la cadena encontrada o el valor de -1 si es que no la encuentra , que para este caso queremos averiguar si el caracter presionado se encuentra entre las letras permitidas.
  • En la línea 17 diríamos que el condicional retorna falso si la tecla presionada no está en la lista de letras permitidas hecha por nosotros (línea 5).
Sólo números
Podríamos usar en la variable "letras" sólo las letras que queramos permitir , incluso si sólo queremos que se permitan números bastaría con sólo cambiar la variable "letras" de esta forma: letras = "0123456789";

Nota : Si hay algo que no podemos evitar es que la persona que visita tu página copie y pegue un texto no deseado al "input text" . Para eso podemos agregarle el atributo "onblur" a la etiqueta input llamando a una función que limpie el "input text" si es que encuentra un caracter no deseado.

<script>
function soloLetras(e) {
    key = e.keyCode || e.which;
    tecla = String.fromCharCode(key).toLowerCase();
    letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
    especiales = [8, 37, 39, 46];

    tecla_especial = false
    for(var i in especiales) {
        if(key == especiales[i]) {
            tecla_especial = true;
            break;
        }
    }

    if(letras.indexOf(tecla) == -1 && !tecla_especial)
        return false;
}

function limpia() {
    var val = document.getElementById("miInput").value;
    var tam = val.length;
    for(i = 0; i < tam; i++) {
        if(!isNaN(val[i]))
            document.getElementById("miInput").value = '';
    }
}
</script>



<input type="text" onkeypress="return soloLetras(event)" onblur="limpia()" id="miInput">
Pruebalo! --> :

Si quieres ver un plugin de JQUERY para hacer todo esto en una sola linea de código para copiar y pegar entra aquí


69 comentarios:

  1. Genial script amigo, muchas gracias.
    Solo me ocurre un error y es que no toma en cuenta las teclas especiales en Firefox.

    A ver si encuentro el fallo. Gracias

    ResponderEliminar
  2. Exactamente no me funciona el Tab(9) y los arrows (37,39)...

    ResponderEliminar
    Respuestas
    1. Pues si tienes razón, solo que había olvidado poner las llaves de la línea 11 a 14.
      Ya esta solucionado debería funcionar correctamente. Saludos

      Eliminar
  3. Genial Franz, no me di cuenta yo tampoco. Gracias de nuevo, tu script es buenísimo. Un saludo

    ResponderEliminar
  4. hola me gustaria saber como declaro y valido un campo q puede tener texto(RT-AS) o puede ten er texto y autoseguido numero(RA-123)?

    ResponderEliminar
  5. me refiero a q despues de un texto con el guion va otro texto

    ResponderEliminar
    Respuestas
    1. En la linea 5 del código esta la variable con todas la letras que quieras que se acepten, si quieres el guión entonces sólo agrégalo al final, así:

      letras = " áéíóúabcdefghijklmnñopqrstuvwxyz-";

      Eliminar
  6. genial tu codigo, funciona, pero copias numeros, control+C, control+v, entonces el formulario no valida nada, como podrias arreglar esta situacion?

    ResponderEliminar
  7. Hola Nestor para eso podrías poner una función al atributo onblur de la etiqueta intput


    Este es el nuevo input:
    < input type="text" id="f" onkeypress="return soloLetras(event)" onblur="validar()">


    Esta es la función validar() que también debes agregar:
    function validar(){
    var val = document.getElementById("f").value;
    var tam = val.length;
    for(i=0;i<tam;i++){
    if(!isNaN(val[i]))
    document.getElementById("f").value='';
    }
    }

    ResponderEliminar
  8. HOLA Franz Gualambo

    GRACIAS POR TU GRAN APORTE PORQUE YO TAMBIEN VALIDABA CON DICHA FUNSION Y ESTABA CONVENCIDO QUE ERA TOTALMENTE SEGURA HASTA QUE VI ESTE FORO.

    MI PREGUNTA ES POR QUE EL CODIGO QUE TU HAS PUESTO NO ME FUNSIONA SI LO PASO ASI COMO ESTA AQUI, Y AUN ASI PERMITE PEGAR CARACTERES NO DESEADOS


    GRACIAS

    ResponderEliminar
    Respuestas
    1. Ya agrege algo a este post, puedes ver el codigo que he agregado .
      Saludos.

      Eliminar
  9. TU SCRIPT ME SIRVIO A LAS MIL MARAVILLAS MUCHAS GRACIAS!!!

    ResponderEliminar
  10. no funciona en firefox el segundo ejemplo, el de solo numeros

    ResponderEliminar
  11. hola Franz no miro el codigo que dices que has agragado

    ResponderEliminar
  12. Franz segun entiendo esta funcion no de be de permitir copiar caracteres numericos en una caja de texto lo he probado y siempre me deja copiarlo de ante mano de agradesco por responder.


    function limpia(){
    var val = document.getElementById("miInput").value;
    var tam = val.length;
    for(i=0;i<tam;i++){
    if(!isNaN(val[i]))
    document.getElementById("miInput").value='';
    }
    }

    ResponderEliminar
    Respuestas
    1. Aparte de esa funcion debes agregarle el atributo onblur="limpia()" al campo de texto así como esta en el codigo del post.
      Ademas esta funcion no es que no te permita copiar sino esque al salir de foco el campo de texto se vuelve vacio

      Eliminar
  13. es correcto Franz todo bien gracia una ultima pregunta cual es la sintaxi para pasar una varible php como parametro en una funcion java escript

    ResponderEliminar
  14. Gracias Fran sos una vestia en el buen centido de la palabra creo que desde hoy sere un fiel seguidor de tus post y si puedo ayudar me uno

    ResponderEliminar
  15. Excelente amigo Franz me pregunto eso esta muy bien pero si en tu caja de texto pegas los caracteres especiales lo permite abra algun modo de que esto no pase?

    ResponderEliminar
    Respuestas
    1. que pege el usuario es algo que no vas a poder evitar , pero al momento salga del foco del campo de texto se limpia el campo de texto

      Eliminar
  16. Buenas tardes Franz necesito validar un input tipo submit que utilizo para eliminar registro de la base de dato y me gustaria validar que cuando el usuario haga clip en el boton eliminar
    me mande un mensage con la opcion yes o no si elije yes que elimine de lo contrario que resetee

    ResponderEliminar
    Respuestas
    1. Puedes usar "confirm" de javascript
      http://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm

      Eliminar
  17. Hola Franz tengo un problema para validar un formulario desde el lado del servidor estoy trabajando con php. quiero validar que si un campo no cumple con los requisito, que me mande nuevamente al formulario pero sin perder el texto en el resto de la caja de texto
    ATTJimmy Diaz

    ResponderEliminar
    Respuestas
    1. cuando dices que no se pierda el texto en las cajas, te refieres a que no haga el submit?

      Eliminar
  18. no el formulario ya se ha en viado a lado del servidor entonces. en la del servidor valido los datos de entrada por ejemplo



    if ($_POST["Titulo"]==""||(strlen($_POST["Titulo"])<'20')||(strlen($_POST["Titulo"])>='100'))
    { cajanombre=cajanombre;
    caja titulo=caja_titulo;
    header("Location:miformulario")
    }




    entonce lo que yo necesito es que si no cumple con los requicito que me envie nuevamente al formulario pero sin que se pierda el con tenido de las cajas de texto

    es decir en otros lenguaje como visual basic
    es haci

    sino cumple la condicion
    variable_titulo=variable_titulo;
    y de esa manera
    me regresa al formulario sin perder el contenido de la caja de texto no se si me explico
    ATT:Jimmy Diaz

    ResponderEliminar
    Respuestas
    1. Bueno ahora no conosco algo asi .
      Pero mejor seria que valides con javascript para que no haga el submit y no recarge la pagina y se quede los texto de las cajas asi como estaba llenada

      Eliminar
  19. Hola! Muy buen post pero creo que en ambos casos acepta ---> "%" ¿Cómo soluciono eso?

    ResponderEliminar
    Respuestas
    1. Si, si te das cuenta también funciona el punto "."
      ya solucione el problema, por falta de tiempo no puedo subir el código, pero ya en estos dias estare subiendo algo más completo y tambien hacer en jquery.
      Saludos

      Eliminar
    2. es verdad! crees que puedas mandarme la solución?, igual y a mi email agnux7@gmail.com de verdad que te lo agradecerías bastante :)

      Eliminar
  20. Excelente Código Me funciono a la Perfección Muchas Gracias

    ResponderEliminar
  21. Que raro no me funcionan los acentos, tendre algo mal?

    ResponderEliminar
  22. hola quiero el codigo para introdicir solo numeros y no letras en javascript porfa te lo agradecere diablita204_4@hotmail.com

    ResponderEliminar
    Respuestas
    1. solo debes de cambiar la variable letras de la linea 5
      letras = '0123456789';

      Eliminar
    2. ola franz, una duda cuando uno cambia las letras por numero e ingresas los numero cuando damos clic en otro texto tambien se borran los numeros

      Eliminar
    3. Ante todo muchas gracias por el aporte y felicitaciones a mi me pas lo mismo cuando cambio a numeros la funcion limpiar limpia los números
      ----

      function soloLetras(e) {
      key = e.keyCode || e.which;
      tecla = String.fromCharCode(key).toLowerCase();
      letras = "0123456789";
      especiales = [8, 37, 39, 46];

      tecla_especial = false
      for(var i in especiales) {
      if(key == especiales[i]) {
      tecla_especial = true;
      break;
      }
      }

      if(letras.indexOf(tecla) == -1 && !tecla_especial)
      return false;
      }

      function limpia() {
      var val = document.getElementById("c_ruc").value;
      var tam = val.length;
      for(i = 0; i < tam; i++) {
      if(!isNaN(val[i]))
      document.getElementById("c_ruc").value = '';
      }
      }


      Eliminar
    4. Pues justamente la funcion limpia debes cambiarla, si limpia los numeros entonces debes limpiar lo que no son numeros.

      Cambia esta linea
      if(!isNaN(val[i]))

      por esta

      if(isNaN(val[i]))

      Eliminar
  23. como le are para que salgan una "alert" al querer introducir numeros

    ResponderEliminar
  24. ESTA MUY BUENO,, YO LO IMPLEMENTE Y ME GUSTO MUCHO.. LE AGREGUE NÚMEROS Y EL GUIÓN.. JJJJEJEJEJ

    GRACIAS A DIOS POR USTED....

    ResponderEliminar
  25. Buenos Días, la función tiene un problema tambien acepta los caracteres de pto (.) y las comillas simples (').....

    ResponderEliminar
  26. asi es, no sirve de mucho contra inyecciones sql si deja pasar las comillas simples... alguna solucion?

    ResponderEliminar
    Respuestas
    1. Validar el campo por medio de javascript no te asegura que no te hagan inyecciones SQL por mas que no te permita usar comillas simples, porque desactivando el javascript del navegador se podría escribir cualquier tecla sin problemas.
      Ahora eso de protegerte de las inyecciones SQL deberías hacerlo por medio de Backend con lenguajes como PHP.

      SALUDOS

      Eliminar
  27. Hola me funciono perfectamente pero al usar ese mismo codigo en un php que contiene unos divs dinamicos ya no me funciona podrias decirme por que????

    ResponderEliminar
    Respuestas
    1. Deberias mostrarme un poco codigo para saber que pasa

      Eliminar
  28. Hola... muy bueno el código!!!
    necesito el que no acepta los puntos.. podrias subirlo porfa??

    ResponderEliminar
  29. Hola, buenas tardes... está función me va casi de perlas, pero necesito algo raro que me están pidiendo, necesito validar un campo dirección de correo electrónico, que no puede empezar con números, pero si puede tener numero después de una letra

    Ejemplo

    1234usuario@mail.com (No es válido)
    usuario1234@mail.com (es válido)

    Muchas gracias por la respuesta

    ResponderEliminar
    Respuestas
    1. Lo mejor seria que uses expresiones regulares para validar emails validos
      http://fgualambo.blogspot.com/2011/09/expresiones-regulares-javascript.html

      Eliminar
  30. que tal franz

    en este código debo ingresar solo símbolos, tu me podrías ayudar?

    if (formulario.nombre.value.length==0) {
    window.alert("Debe escribir su nombre");
    document.formulario.nombre.value.focus();
    document.formulario.apellido.value.select();
    return (false);
    }
    if (formulario.apellido.value.length==0) {
    window.alert ("Debe escrbir su apellido");
    document.formulario.apellido.value.focus();
    document.formulario.apellido.value.select();
    return (false);

    ResponderEliminar
    Respuestas
    1. En el codigo que he puesto en el articulo puedes elegir los caracteres permitidos, solo debes ver la forma de aplicarlo a tu proyecto.
      Saludos

      Eliminar
  31. hola.. en esta linea :" key = e.keyCode || e.which; " me aparece un error
    "syntaxError: missing } in XML expression: (on column 31) "
    como lo puedo solucionar?

    ResponderEliminar
    Respuestas
    1. Muestra tu código completo mejor para ver el error

      Eliminar
  32. Carnal, cgun la tabla de simbolos la tecla delete es el numero 46, pero no funciona, investigue y lo cambie x el numero 8 y funciona a la perfeccion x si alguno tiene problemas =

    ResponderEliminar
  33. Muchas gracias, compañero!!! Un script genial!

    ResponderEliminar
  34. Amigo una preguntota, estoy tratando de usar tu codigo para validar un campo, en el que quiero NUMEROS Y LETRAS,pero al dar un clic fuera del input me borra el contenido cuando este contiene NUMEROS, al final lo he modificado asi, y ya no me borra el contenido cuando doy clic fuera, pero lo que si me permite es introducir el caracter '%',como lo puedo restringir tambien? Agradecria mucho tu resputesa. te dejo el codigo como lo modifique:

    function soloLetras(e) {
    key = e.keyCode || e.which;
    tecla = String.fromCharCode(key).toLowerCase();
    letras = "abcdefghijklmnñopqrstuvwxyz1234567890";
    especiales = [8, 37, 39, 46];

    tecla_especial = false
    for(var i in especiales) {
    if(key == especiales[i]) {
    tecla_especial = true;
    break;
    }
    }

    if(letras.indexOf(tecla) == -1 && !tecla_especial)
    return false;
    }

    ResponderEliminar
  35. Hola, necesito evitar que se introduzcan espacios en blanco, como lo hago?. Salu2.

    ResponderEliminar
  36. Simplemente quita el caracter espacio :

    letras = "abcdefghijklmnñopqrstuvwxyz1234567890";

    ResponderEliminar
  37. ola amigo en el caso de no mas ingresar numero q canbio

    ResponderEliminar
  38. Buenos dias, a mi me funciona perfecto en mozilla el codigo pero en I.E, no funciona, iagual me acepta los puntos, comas , etc

    ResponderEliminar
  39. Buenas noches Franz, muy bueno tu post me ayudaste mucho validando campos...

    una pregunta, estoy haciendo un formulario para control de notas y no se como validar los campos de texto para que solo puedan agregar las I (que significa inasistente), NP (no presento) y las notas del 01 hasta el 20...

    ¿Qué debo hacer para validarlos?

    ResponderEliminar
    Respuestas
    1. pues tu cadena de letras debería ser
      letras = "INP0123456789";

      Eliminar
  40. amigo como hago para k solo me acepte la fecha 00/00/0000. resaltando k solo se puede escribir "dia 2 numeros", "mes 2 numeros" y "año 4 numeros"

    ResponderEliminar
  41. Muchisimas Gracias, me funciono perfectamente!

    ResponderEliminar
  42. tu codigo me interesa. tengo una inquietud, tengo un campo < type="text" onkeypress="return mayuscula(event)" id="miInput"> lo utilizo para código de productos 'AA-152' es decir cuando ingresa texto minúsculo automáticamente se cambia a mayúscula. también puede ingresar números y variables(-_). otras de las cosas que en el texto estoy escribiendo el valor "AA-152" y el usuario selecciona con el mouse solo el texto A-1 y cuando preciosa cualquier letra como ejemplo "Q" entonces saldría "AQ52" porq he seleccionado el TEXTO "A-1" y al presionar el texto "Q" lo reemplaza a "AQ52"

    ResponderEliminar
  43. Gracias man me ayudo mucho mil gracias

    ResponderEliminar