Ir al contenido principal

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.

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
  17. Seria mas interesante aun poner solo los caracteres que no deseo que ingresen. Solo hay que modificar la condición

    ResponderEliminar
  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
  19. disculpa, tengo una duda, estoy utilizando una validacion de solo letras, pero quiero que cuando se presione algun numero no solo esten bloqueados si no que tambien me de un alert y me diga que no se aceptan numeros

    ResponderEliminar
  20. Hola amigo, muchas gracias por tu aporte, pero no se si te habían comentado que al subirlo y acceder desde un equipo celular la validación no funciona, yo lo intente y en teoría solo podría escribir números pero me acepta cualquier caracter, pero en escritorio si funciona, sabrás por que pasa esto? Saludos.

    ResponderEliminar
  21. Hola, muy buen plugin, la pregunta es: si en algún momento necesito cambiar el formato de un mismo input en un formulario, por ejemplo, para que el mismo input acepte sólo números en algunos casos y sólo letras en otros, ¿es posible?

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

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

En algunos casos necesitaremos que el usuario ingrese solamente letras en un campo de texto, impidiendo así el ingreso de números y caracteres especiales. Gracias a Javascript y HTML esto puede ser posible.   Método 1:  Podemos utilizar el atributo onkeypress devolviendo el valor de false, si es que se escribe un caracter distinto a la cadena que hemos definido (para el ejemplo es " áéíóúabcdefghijklmnñopqrstuvwxyz").   Método 2: Pasos a seguir: Crear una lista con todas las letras permitidas (a,b,c ... etc). 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.     Entendiendo el código 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 variabl

La propiedad Disabled en Javascript

Como atributo de un elemento HTML Ejemplo: "Solo añadiendo el atributo disabled". < input type = "button" value = "Desactivado" disabled /> < input type = "text" disabled /> < input type = "button" value = "Boton normal" /> Demostración: El botón y el campo de texto están desactivados Manipulando Disabled usando Javascript Ejemplo 1: Utilizando el "id" del campo de texto en este caso "miText". < script type = "text/javascript" > function Desactivar () { document . getElementById ( 'miText' ) . disabled = true ; } < /script > < input type = "button" value = "Desactivar" onclick = "Desactivar()" / > < input type = "text" id = "miText" / > Demostración: Dándole clic al botón se desactiva el campo de texto. Ejemplo 2:Utilizando el event

Validar campo de texto con javascript

Obligar al usuario a introducir un valor en un campo de texto perteneciente a un formulario se puede hacer de la siguiente manera con javascript. Código < script type = "text/javascript" > function validar () { //obteniendo el valor que se puso en campo text del formulario miCampoTexto = document . getElementById ( "miCampo" ) . value ; //la condición if ( miCampoTexto . length == 0 ) { return false ; } return true ; } </ script > < form action = "mipagina.php" onsubmit = "return validar()" > < input type = "text" id = " miCampo " name = "miCampo" > < br > < input type = "submit" value = "Enviar" > </ form > miCampoTexto.length -> indica el número de caracteres del texto introducido En esta validación los usuarios deben llenar los campos