Validar formulario con Livevalidation Standalone

Existe una librería javascript que nos permite validar nuestros formularios de forma muy simple en el lado cliente para que no se envíen al servidor datos erroneos.

Esta librería se llama Livevalidation Standalone. Puedes visitar su página oficial para ver con más detalle de que se trata, ver ejemplos, descarga del script y toda su documentación.

Siempre que utilizemos un validador en el lado cliente siempre tendremos que validar en el servidor con PHP por si se produce el caso de que el usuario tuviese deshabilitado el javascript en su navegador.

Lo primero que tendremos que hacer para utilizar esta librería en nuestros formularios es incluir su script en el <head> de nuestrá página:

<script type="text/javascript" src="js/livevalidation_standalone.compressed.js"></script>

Después ya en nuestros formularios deberemos ver y tratar aquellos campos que deban ser obligatorios o tener algún formato especial. Por ejemplo, vamos a jugar con el campo email que podría ser uno de los más completos.

<input id="email" name="email" type="text" />
<script type="text/javascript">
var email = new LiveValidation('email');
email.add(Validate.Presence);
email.add(Validate.Email);
</script>

En cada campo que se quiera validar deberemos incluir un script con el anterior. Si nos fijamos, se utiliza una connotación orientada a objetos en la cual estamos realizando una instancia de la clase LiveValidation pasando como parámetro el name del input.

En las 2 líneas siguientes lo que se comprueba es que en el campo haya datos y seguidamente tengan como expresión regular el formato de email. Así de simple nos podemos ahorrar un montón de código.

Si vemos el ejemplo en funcionamiento podremos ver el efecto que se menciona y la validación de un campo en el cual solo se pueden introducir números y otro en el cual se necesita la presencia de algún carácter.

Si todos los datos que se introduzcan son correctos solo faltará procesar esos datos con PHP:

<?php
if (isset ($_POST['send'])) {
   echo 'Name: '.$_POST['name'].'<br/>';
   echo 'Edad: '.$_POST['edad'].'<br/>';
   echo 'E-mail: '.$_POST['email'].'<br/><br/>';
}
?>

Aquí simplemente si se pulsa el botón de enviar estamos imprimiendo por pantalla los datos enviados. Con estos datos se podrían hacer muchos otros procesos como enviar un email o guardar en base de datos como más comunes.

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(3 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

12 respuestas a “Validar formulario con Livevalidation Standalone”

  1. poli dice:

    cuando presione el boton submit se valide ..hasta que este correcto y luego envie el formulario por ajax….se puede eso….

    • Jose Aguilar dice:

      Hola,

      Gracias por tu mensaje.

      Si. La validación de los campos se ejecuta tras escribir algo en el campo y al pulsar el botón Enviar. El ajax que procesa los datos se podría hacer justo cuando está todo bien.

      Jose AGuilar,
      Saludos

  2. pol dice:

    se puede utilizar con ajax…

  3. diego alvarado dice:

    hola que tal buena la informacion quisiera q me ayudara a validar unos campos para que solo ingresen letras , gracias saludos

  4. Mauro dice:

    Hola, muy buena la explicacion, pero no logro que me funcione para formularios de mi web.
    Subi la libreria, puse para que me valide el mail y no pasa nada.

    Alguna idea ? no logro encontrar el problema.

  5. Alfonso dice:

    amigo tal vez suena tonta mi pregunta al momento de validar los campos de mi formulario con livevalidation al momento de desplegar el texto del jquery no me salen en color verde si es correcto y en color rojo si son correctos estos datos sabras el porque..

  6. angelkaido dice:

    has usado LiveValidation con un COMBOBOX ?

  7. Jerrod Sashington dice:

    I like this website because so much utile material on here : D.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre