Formulario Jquery y Ajax desde 0 [Validacion JQuery]

Una de las partes mas importantes de la programación es la validación de datos, es decir que los datos que estamos recibiendo sean los correctos, en la programación web hay 2 tipos de validaciones, del lado del cliente que ocurre en el navegador y que es en la que nos enfocaremos en este tutorial utilizando Jquery y la validaciones del lado del servidor que como su nombre lo indica se realizan con algun lenguaje de programación del lado del servidor como puede ser PHP, ASP .NET, PERL o incluso JSP.

¿Para que nos sirve validar datos y proteger nuestras aplicaciones web?
Pues la mayoria de los usuarios que usan la red solo se limitan a eso, a utilizar los servicios, pero existen otro tipos de usuarios que tienen profundos conocimientos relacionados a la seguridad informática y que son capaces de encontrar bugs en nuestros códigos (generalmente por fallos de programación) y a partir de ahí intentar tomar un servidor para hacer usos distintos con el ;).

Por si alguien esta perdido el orden de los tutoriales es el siguiente:

La validación de datos usando JQuery del lado del cliente

Seguiremos utilizando nuestro archivos .JS al cual llamamos validacion_form.js en el tutorial pasado, sobre ese archivos seguiremos escribiendo nuestro código que al final quedo asi.

jQuery(document).ready(function(){
  //variables globales
  var formBoxes= jQuery(".text");
  var inputUsername = jQuery("#inputNombre");
  var reqUsername = jQuery("#req-username");
  var inputEmail = jQuery("#inputCorreo");
  var reqEmail = jQuery("#req-email");
  var inputWebsite = jQuery("#inputWeb");
  var textareaMessage = jQuery("#inputComentario");
  var reqMessage = jQuery("#req-message");
  
  var defaultUsername = "Escribe tu nombre...";
  var defaultEmail = "Escribe tu email...";
  var defaultWebsite = "Url de tu web si tienes...";
  
  //funciones de validacion
  function validateMessage(){
    //Si el mensaje esta vacio
    if(textareaMessage.val().length == 0){
      reqMessage.fadeIn('fast');
      reqMessage.removeClass("requisites");
      return false;
    }

    else{
      reqMessage.fadeOut('fast');
      reqMessage.addClass("requisites")//oculta el mensaje de nuevo
      return true;
    }  
  }
  
  function validateUsername(){
    //NO cumple longitud minima
    if(inputUsername.val().length < 4 || inputUsername.val == defaultUsername){
      reqUsername.fadeIn('fast');
      reqUsername.removeClass("requisites");
      return false;
    }
    //SI longitud pero NO solo caracteres A-z
    else if(!inputUsername.val().match(/^[a-zA-Z]+$/)){
      reqUsername.fadeIn('fast');
      reqUsername.removeClass("requisites");
      return false;
    }
    // SI longitud, SI caracteres A-z
    else{
      reqUsername.fadeOut('fast');
      reqUsername.addClass("requisites")//oculta el mensaje de nuevo
      return true;
    }
  }
  function validateEmail(){
    //NO hay nada escrito
    if(inputEmail.val().length == 0){
      reqEmail.fadeIn('fast');
      reqEmail.removeClass("requisites");
      return false;
    }
    // SI escrito, NO VALIDO email
    else if(!inputEmail.val().match(/^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i)){
      reqEmail.fadeIn('fast');
      reqEmail.removeClass("requisites");
      return false;
    }
    // SI rellenado, SI email valido
    else{
      reqEmail.fadeOut('fast');
      reqEmail.addClass("requisites");//oculta el mensaje de nuevo
      return true;
    }
  }
  
  //controlamos la validacion en los distintos eventos
  // Perdida de foco
  inputUsername.blur(validateUsername);
  inputEmail.blur(validateEmail);
  textareaMessage.blur(validateMessage);
  
  // En cuanto el usuario esta pulsando teclas (escribiendo)
  inputUsername.keyup(validateUsername);
  inputEmail.keyup(validateEmail);
  textareaMessage.keyup(validateMessage);
  
  // Envio de formulario
  jQuery("#form1").submit(function(){
    if(validateUsername() == true && validateEmail() == true && validateMessage() == true)
    {
      jQuery("#loading").animate({height:'show',width:'show',opacity:'show'},{duration:'slow'});
      return true;
    }
    else
    {
      return false;
    }
  });
  
  //controlamos el foco / perdida de foco para los input text
  formBoxes.focus(function(){
    jQuery(this).addClass("active");
  });
  formBoxes.blur(function(){
    jQuery(this).removeClass("active");  
  });

  //Para que los inputs tengan un texto descriptivo de la informacion requerida
  //se ve bonito :)
  inputUsername.focus(function(){
    if(jQuery(this).attr("value") == defaultUsername) jQuery(this).attr("value", "");
  });
  inputUsername.blur(function(){
    if(jQuery(this).attr("value") == "") jQuery(this).attr("value", defaultUsername);
  });
  
  inputEmail.focus(function(){
    if(jQuery(this).attr("value") == defaultEmail) jQuery(this).attr("value", "");
  });
  inputEmail.blur(function(){
    if(jQuery(this).attr("value") == "") jQuery(this).attr("value", defaultEmail);
  });
  
  inputWebsite.focus(function(){
    if(jQuery(this).attr("value") == defaultWebsite) jQuery(this).attr("value", "");
  });
  
  inputWebsite.blur(function(){
    if(jQuery(this).attr("value") == "") jQuery(this).attr("value", defaultWebsite);
  });
  
});

Como ven hemos agregado las siguientes lineas al inicio

  var reqUsername = jQuery("#req-username");
  var reqEmail = jQuery("#req-email");
  var reqMessage = jQuery("#req-message");

Si analizamos nuestro código HTML esos son los ID’s de los divs que mostraran un mensaje de error, en caso de que la validación de nombre, email o mensaje no se cumpla.

Mas abajo creamos unas pequeñas funciones que nos ayudaran a validar los datos por ejemplo la funcion que valida el nombre de usuario:

  function validateUsername(){
    //NO cumple longitud minima
    if(inputUsername.val().length < 4 || inputUsername.val == defaultUsername){
      reqUsername.fadeIn('fast');
      reqUsername.removeClass("requisites");
      return false;
    }
    //SI longitud pero NO solo caracteres A-z
    else if(!inputUsername.val().match(/^[a-zA-Z]+$/)){
      reqUsername.fadeIn('fast');
      reqUsername.removeClass("requisites");
      return false;
    }
    // SI longitud, SI caracteres A-z
    else{
      reqUsername.fadeOut('fast');
      reqUsername.addClass("requisites")//oculta el mensaje de nuevo
      return true;
    }
  }

En la cual al inicio realiza una comparación de longitud de caracteres o que el texto en el value no sea igual al texto descriptivo, si la validación falla nos devuelve un false y un mensaje de error aparece, esto se logra añadiéndole una clase que tiene un display:block; y un evento de fadeIn para que el mensaje (el div) aparezca fácilmente, también comprobamos que el nombre de usuario no contenga caracteres especiales como /?¿’* etc, de la misma forma cuando la validación se cumple se le agrega la clase que tiene el display:none; y se utiliza la fadeOut para desaparecer el mensaje suavemente.

Si analizas el código fuente veras que las demas funciones que validan los siguientes campos son muy similares.

Ahora ¿como disparamos esas funciones de validación? pues de nueva cuenta hacemos uso de los eventos focus y blur que nos brinda JQuery y esta vez también hacemos uso de un nuevo evento llamado keyup que detecta cuando el usuario ha pulsado una tecla.

  //controlamos la validación en los distintos eventos
  // Perdida de foco
  inputUsername.blur(validateUsername);
  inputEmail.blur(validateEmail);
  textareaMessage.blur(validateMessage);
  
  // En cuanto el usuario esta pulsando teclas (escribiendo)
  inputUsername.keyup(validateUsername);
  inputEmail.keyup(validateEmail);
  textareaMessage.keyup(validateMessage);

Y al final tenemos un código que sera el que se comunique con el codigo del siguiente tutorial hecho con AJAX :D, este codigo capturara el evento submit de nuestro formulario y dependiendo de si cumple o no con las validaciones devolvera un true o un false segun sea el caso, a su vez también mostrara una .

  // Envio de formulario
  jQuery("#form1").submit(function(){
    if(validateUsername() == true && validateEmail() == true && validateMessage() == true)
    {
      jQuery("#loading").animate({height:'show',width:'show',opacity:'show'},{duration:'slow'});
      return true;
    }
    else
    {
      return false;
    }
  });

Ya casi terminamos :)

Related Posts Plugin for WordPress, Blogger...

Share

alevsk

Escrito por Alevsk

Tengo 21 años, En estos ultimos 6 años he trabajado como Senior Developer en varias empresas y actualmente estoy con Websec. Soy autodidacta, me interesan temas como la ingeniería inversa, el mundo Linux/OSx, las auditorías de seguridad en redes, la seguridad web, las tecnologías inalámbricas, desarrollo web/movil y el underground Informático ... Algunos dicen que soy un Geek frustrado. Sigueme en @Alevsk
Puedes Comentar, o hacer un trackback de tu propio sitio.


14 Comentarios en “Formulario Jquery y Ajax desde 0 [Validacion JQuery]”

  1. LeeBardo dice:
    Google Chrome 12.0.742.100 Windows 7

    hola Alevsk
    soy nuevo en cuanto a programación web concierne, pero gracias por facilitar tu conocimiento con los demás me a servido demasiado muchas gracias, desgraciadamente los últimos 3 links:

    -Hacer uso de la tecnología Ajax para mandar los datos al script PHP sin recargar la pagina
    -Realizar validaciones con PHP del lado del servidor
    -Finalmente enviar el mensaje a un mail

    no funcionan y me he quedado a medio camino, me preguntaba si podrías reparar los links o enviarme los códigos a mi correo si no fuese mucho el abuso de confianza.

    por ultimo, pero no menos importante, excelente pagina viejo sigue subiendo tutoriales.

    chao gracias

  2. Alevsk dice:
    Google Chrome 13.0.782.107 Mac OS

    Hola amigo, primero que nada gracias por visitar mi blog, una disculpa esos últimos post aun no los he hecho, este fin de semana los voy a realizar, mientras tanto, claro que te puedo mandar el código, te lo envio al correo con el que realizaste este comentario? o me puedes facilitar algún otro mail?

    salu2

  3. LeeBardo dice:
    Google Chrome 12.0.742.100 Windows 7

    Hola Alevsk:
    Gracias por responder, oye puedes enviarme el código al correo con el cual me registre.
    Oye te tengo una idea para que crees un nuevo articulo, mira yo necesito hacer un formulario para registrar personas en una BD MySQL y la idea es poder vincular una imagen a cada usuario y registrarla en la BD pero todo con JQuery.
    Logro registrar a la persona pero no a la imagen, averigüé y por motivos de seguridad ajax y jquery no permiten hacer lo que quiero, tengo dos archivos “nuevo.php” que es donde esta el formulario ademas de la función que realiza la inserción en la BD y “main.js” donde esta el código de validación y una función que recibe los datos del formulario para posteriormente redireccionar los datos a “nuevo.php”. (logre registrar al usuario y guarda su imagen con php, pero me redirecciona a otra pagina lo cual no es la idea.)

    Alevsk, hay tienes un nuevo tema para tu block y de paso me ayudas en mi problema, por favor ayudameee!!!

    nos vemos adiós y éxito.

  4. roberfu dice:
    Google Chrome 15.0.874.106 Windows 7

    Que tal amigo me parece excelente tus tutoriales pero al igual que los demas me he quedado a medias podrias subir los tutoriales que faltan o me podrias mandar a mi correo los codigo te lo agradeceria mucho ^^

  5. Pedro Meneses dice:
    Google Chrome 15.0.874.121 Windows 7

    Hola que tal amigo, me podrias mandar el codigo completo porque lei que aun no terminas los articulos, a este mail, muchas gracias.

  6. Sergio dice:
    Firefox 9.0.1 Windows XP

    Muy bueno el artículo, Gracias.

  7. dave raffo dice:
    Firefox 9.0.1 Ubuntu

    bien tu ejemplo PERO que pasa si la funcionde validacion en js recibe 2 parametros y se encuentra en una API de seguridad:
    NombreFuncion(input,mensaje)
    el ejemplo no funciona como lo harias???

  8. dave raffo dice:
    Firefox 9.0.1 Ubuntu

    asi pe :
    eInformation1.blur(function() { validateInformation(eInformation1,divMsg1) });

  9. Daniel Tinajero dice:
    Firefox 12.0 Windows XP

    Hola, antes que nada muy buenos tus tutoriales gracias por la información pero tengo una pequeña duda este pedazo de codigo en que parte va?

    //controlamos la validación en los distintos eventos
    // Perdida de foco
    inputUsername.blur(validateUsername);
    inputEmail.blur(validateEmail);
    textareaMessage.blur(validateMessage);

    // En cuanto el usuario esta pulsando teclas (escribiendo)
    inputUsername.keyup(validateUsername);
    inputEmail.keyup(validateEmail);
    textareaMessage.keyup(validateMessage);

  10. Alevsk dice:
    Google Chrome 21.0.1180.89 Mac OS

    Hola, esas instrucciones de ahi son para los eventos, pueden ir entre:

    jQuery(document).ready(function(){
    //aqui
    });
    

    Solo ten en cuenta que debes de hacer antes las declaraciones (inputUsername, inputEmail, etc, etc).

    salu2

  11. emerson dice:
    Firefox 17.0 GNU/Linux 64 bits

    hola Alevsk

    he seguido el tutoria y funciona excelente, pero quiero pedir tu ayuda con un ejemplito de como podria colocar en el formulario un campo select y validarlo asi como se validan los textos.

    gracias por tu ayuda

  12. Danibus dice:
    Google Chrome 30.0.1599.69 Windows 7

    Hola felicitar a Alevsk por este excelente tutorial.

    Tengo una duda. No entiendo porqué separas esto:
    inputUsername.blur(validateUsername);

    de esto

    inputUsername.focus(function(){
       if(jQuery(this).attr("value") == defaultUsername) jQuery(this).attr("value", "");
    });

    Lo quiero decir es que he probado a agruparlo todo así y funciona:

    
    inputUsername.focus(function(){
    inputUsername.blur(validateUsername);
    if(jQuery(this).attr("value") == defaultUsername) jQuery(this).attr("value", "");
      });
    

    ¿Es por ser más didáctico o hay algún otro motivo?
    Es que no entiendo porqué no hacerlo todo de una vez, para mi es un poco confuso hacer una “algo” en un INPUT p.e., y luego más tarde volver otra vez a hacer “algo”, cuando quizá puedas hacerlo todo de una vez.

  13. Danibus dice:
    Google Chrome 30.0.1599.69 Windows 7

    Me he equivocado. he mezclado focus y blur. Me refería a ponerlo todo así:

    
    inputUsername.blur(function(){
    jQuery(this).validateUsername();
    if(jQuery(this).attr("value") == "") jQuery(this).attr("value", defaultUsername);
    });
    

    De hecho esto también parece funcionar:

    
    inputUsername.blur(function(){
    validateUsername();
    if(jQuery(this).attr("value") == "") jQuery(this).attr("value", defaultUsername);
    });
    

Escribe un comentario