Validar campo de texto sólo números, letras etc... con JQUERY

A veces he tenido la necesidad de validar un campo de texto que sólo permita cierto tipo de caracteres como es el caso de documentos(sólo números) o nombres(letras y no números) y tantas combinaciones que requiera un campo de texto para una determinada página web.
Y ya que vamos a utilizar JQUERY hagamos uso de este plugin de jquery muy fácil de utilizar.

$('selector').validCampoFranz('mis-caracteres');


Demostraciones

Campo que acepta sólo números
Campo de acepta sólo letras y espacios

Quieres usarlo en tu proyecto?
Primero descargar el Jquery :
 http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
Segundo descargar el Plugin :
 https://raw.github.com/franz1628/validacionKeyCampo/383dab045bbc992120c4276e9d6f2c3a852f60b9/validCampoFranz.js
<!doctype html>
<html>
   <head>
     <script src="jquery.min.js"></script>     
     <script src="validCampoFranz.js"></script>
       <script type="text/javascript">
            $(function(){
                //Para escribir solo letras
                $('#miCampo1').validCampoFranz(' abcdefghijklmnñopqrstuvwxyzáéiou');

                //Para escribir solo numeros    
                $('#miCampo2').validCampoFranz('0123456789');    
            });
        </script>        
   </head>
   <body>
        <h2>Escribe sólo teclas permitidas</h2>  
        
        Mi Campo 1 <input type="text" id="miCampo1">      
        Mi Campo 2 <input type="text" id="miCampo2">      
   </body>
</html>

Podemos ver acá un tutorial de como utilizarlo.


32 comentarios:

  1. Gracias andaba buscando esto, saludos desde Concepción,Chile.

    ResponderEliminar
  2. Si quiero escribir solo letras Y numeros, pero no deseo que ingresen caracteres especiales ni nada que permita la inyección de codigo, como lo hago??? necesito ingresar valores como AT45AB, son letras y numeros, pero no caracteres especiales ni espacios, etc.

    ResponderEliminar
    Respuestas
    1. Pues parece que es mi culpa por no explicarlo bien en este articulo.

      Se usa facilmente :

      //Este ejemplo aceptaria solo los caracteres : 1,2,3,f,g,r
      $('.miClase').validCampoFranz('123fgr');

      Eliminar
  3. Ok, buenisimo! Pero...

    si quieres escribir un e-mail? ej.: e_jemplo83@ejemplo-mail.com

    ResponderEliminar
    Respuestas
    1. Para eso mejor seria usar expresiones regulares http://fgualambo.blogspot.com/2011/09/expresiones-regulares-javascript.html

      Eliminar
  4. Al principio no me funcionaba, pero después sí:
    *Les va a servir para habla hispana seguro.
    *Caso: Tengo un formulario para que los usuarios se registren en un sitio de un cliente:



    function name_allowed() {
    $(function(){
    $('#r-namerec').validCampoFranz(' -._abcdefghijklmnñopqrstuvwxyzáéíóúü@123456789');
    });
    }

    Espero que les sirva, y tambien que me sirva a mi ;)

    ResponderEliminar
  5. ésto solo funcion ais lo pegas pero si quieres escribir un ejemplo: "méxico" no sirve :D

    ResponderEliminar
    Respuestas
    1. Te comento que si funciona solo debes de agregarlo en los caracteres áéíóú

      Eliminar
  6. Excelente!! super práctico y fácil de usar!!

    Saludos desde Medellín - Colombia!!!

    ResponderEliminar
  7. Hola, y si quisieras aceptar también el salto del linea (la tecla intro), ¿qué deberías escribir en esa cadena?.

    Muy útil! gracias :)

    ResponderEliminar
  8. Gracias me salvaste, eres lo máximo!

    ResponderEliminar
  9. Saludos amigo, pruebo tu ejemplo en mi maquina y sirve de perlas, pero al momento de implementarlo en mi proyecto nada mas no lo hace, de echo solo cambie las id y guarde en mi maquinalos js
    <-script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><-/script>
    <-script src="http://cloud.github.com/downloads/franz1628/validacionKeyCampo/validCampoFranz.js"><-/script> pero no lo hace, espeor puedas ayudarme..Saludos

    ResponderEliminar
    Respuestas
    1. Lo que debe pasar es que no pones las rutas de correctamente ( Fijate con el chrome poniendo F12 y en la pestaña Consola )(ahi puedes ver los errores incluso si estas llamando mal los archivos)

      Eliminar
  10. como apunto al name no a la id que la estoy ocupando en un css

    ResponderEliminar
    Respuestas
    1. y porque no puedes apuntar a la id?
      si quieres apuntar al name seria algo asi :
      $('input[name="minombre"]')

      Eliminar
  11. Esta muy bueno tu codigo, pero tengo una duda.

    Como lo puedes hacer para que acepte los saltos de pagina???

    ResponderEliminar
    Respuestas
    1. Lo que tu quieres es para un Area de texto....
      este plugin es para un campo de texto...
      Quiza lo pueda modificar pero es para otro momento

      Eliminar
  12. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  13. Quien quiera usar el salto de linea, puede hacer lo siguiente:

    $("#campo").keypress(function(e){

    if (e.keyCode == 13){
    e.preventDefault();

    var campo = $("#campo").val();
    $("#campo").val(campo + "\t\n");
    }
    });

    Básicamente, es coger el contenido, ponerte el salto de linea y volverlo a añadir.

    ResponderEliminar
  14. hola. ultimamente me itereza esto de la programacion. quisieras que me explicaras a fondo todo lo que explcas arriba bobre los scrps jde java. codigos validaciones de cambo etc... por que yo busco lo que quiero poner poner y me funciona pero quisiera aprederlo saber para que sirve, como funciona cada cosa. etc. por que yo soy de esas personas que siempre queire saber lo que hacer y no hacer las cosas asi como a las copias. me pregunto i tines algun canal en youtube en el que expliques de manera auditiva todas estas cosas¿?

    ResponderEliminar
  15. Hola muy bueno el plugin, una consulta: si en un momento necesito cambiar de formato a un mismo input dentro de un formulario, por ejemplo que un mismo input en algunos casos acepte solo números y en otros casos sólo letras, Es posible?

    ResponderEliminar
    Respuestas
    1. Claro si es posible, solo es cuestión que vuelvas a llamar al método para el mismo input

      Eliminar
    2. he intentado hacer eso de la siguiente forma pero no me funciona, estoy haciendo algo mal.

      $(".tipodoc").change(function()
      {
      var formulario =$(this).parents("form");
      var documento= $(this).val();

      switch (documento)
      {

      case '1':
      $(this).parents("div").find("label.documento").html("# Cedula");
      formulario.find("input.txtdocu").val("");
      formulario.find("input.txtdocu").validCampo('0123456789');
      break;
      case '2':
      $(this).parents("div").find("label.documento").html("# Pasaporte");
      formulario.find("input.txtdocu").val("");
      formulario.find("input.txtdocu").validCampo('abcdefghijklmnñopqrstuvwxyzáéiou');
      break;

      default:
      $(this).parents("div").find("label.documento").html("# Documento");
      break
      }

      });

      Eliminar
  16. Muy buen codigo me sirve de mucho te lo agradezco felicitaciones

    ResponderEliminar
    Respuestas
    1. Que bueno amigo... justo por eso hice este post

      Eliminar
  17. Seria mas interesante aun poner solo los caracteres que no deseo que ingresen. Solo hay que modificar la condición

    ResponderEliminar
    Respuestas
    1. Exacto! Como poner los números por ejemplo.
      Saludos

      Eliminar
  18. Franz
    esto no me funciona, por que?
    $(".txtdata").validCampoFranz('0123456789ABC.');

    Solo acepta los numeros y el punto mas no las letras ABC, algùn comentario?

    Saludos

    ResponderEliminar