LiveValidation es una utilidad en Javascript que permite validar los campos o entradas de textos de los formularios HTML (textarea, input text, input check) en tiempo real. Tiene interesantes características:
- Verifica que un campo no esté vacio.
- Verifica que el texto ingresado corresponda a uno determinado. Si usted exige que el usuario escriba "hola" entonces el validador actuará en función de ello, independientemente de si es con mayúsculas o minúsculas.
- Verifica que cierta palabra aparezca en una expresion ingresada.
- Verifica que el texto ingresado solo contenga números, números enteros ó un número específico.
- Verifica que el texto ingresado solo contenga números, pero que éste sea mayor ó menor que cierto valor, ó también verifica que el número corresponda a un valor entre un rango específico.
- Verifica la longitud de caracteres del texto ingresado, puede ser mayor ó menor a cierto valor específico, ó corresponda a un rango específico.
- Verifica que ciertas expresiones ó texto este incluido ó excluido del texto ingresado.
- Verifica que un checkbox este clickeado ó no.
- Verifica que contraseña y confirmanción coincidan (por ejemplo para un formulario de registro.)
- Verifica la estructura de un e-mail (tunickname@servidor.xxx)
- Finalmente todo lo descrito anteriormente lo puede combinar para obtener un validador avanzado.
- Entre otras características muy interesantes.
Cómo usarlo
En la parte del head, agrega el archivo javascript, esto dependerá del tipo de archivo que descarges… en este caso usamos en standalone.
<script type="text/javascript" src="livevalidation_standalone.compressed.js"></script>
Luego dentro del body en los campos ó entradas de texto que desees validar, llama a los métodos necesarios. En este ejemplo estamos validando que el campo cuyo id "f1" no quede en blanco.
<input id="f1" type="text">
<script type="text/javascript">
var f1 = new LiveValidation('f1');
f1.add(Validate.Presence);
</script>
En la sección ejemplos del LiveValidation puede encontrar otras formas de uso.
Enlaces | LiveValidation, Documentación
muy buen articulo y perfectmente claro el ejemplo. Gracias , es lo q estaba buscando
saludos y sigue asi!
Muchisimas gracias!! me sirvio bastante!!! 🙂
Bastante bueno, realmente estaba buscando algo parecido, solo me falta modificarlo un poquillo 😉
excelente aporte mi hermano
Como puedo hacer para que me aparezcan los mensajes en español?
Ya cambie los dos js pero no se de donde saca los mensajes.
Muchas gracias
Hola, es correcto, pero tengo una duda ya que soy nuevo en el mundo de las validaciones con ajax, si bien es cierto que es una libreria excelente a la hora de validar el contenido de los campos del formulario, muestra error o valido segun se haya establecido, como se podria hacer para que si hay algun mensaje errado( con livevalidation)no permita apretar el boton (submit) del form, ya que esa seria la verdadera validacion, por que mostrando o no mostrando el mensaje (erroro o valido) igual manda los datos.
holaaa como puedo hacer para que me salgan los mensajes en español?? gracias!!
En respuesta a [Daniel] comentarte que, con esta libreria, si al hacer un submit hay alguna regla que no se cumple (por ejemplo no puede estar un campo vacio), la libreria no nos dejara seguir hasta que se corrijan esos errores, una vez corregidos nos deja!
Pegale un vistazo a esto:
http://livevalidation.com/documentation
y a esto
http://livevalidation.com/examples
recordad que todos las “normas” añadidas con livevalidation van entre etiquetas
En respuesta a irMary puedes modificar los mensajes en ingles buscandolos en el .js para definir mensajes genericos, aunque también puedes definir un error diferente para cada ,…
ejemplo.(campo no puede estar vacio con texto personalizado):
nombre_input.add(Validate.Presence, {failureMessage: “Hey no puedo estar vacio! llename o el texto que tu quieras”});
Espero que os haya servido de ayuda cualquier cosita comentadme por email!
Saludos!
Una pregunta… por lo que conozco de ajax, su objetivo principal es conectar el cliente con el servidor para hacer consultas en tiempo real sin cambiar la vista en el navegador. La pregunta es ¿Cómo puedo conectar esta aplicación a mis métodos en el servidor para hacer las validaciones?
hola que tal estoy probando tu libreria funciona excelente solo tengo 2 preguntas:
en el ejemplo 1
tengo declarado mi formulario asi
y mi boton submit asi
FUNCIONA PERFECTAMENTE!!!
en el ejemplo 2
tengo declarado mi formulario asi
y mi boton submit asi
asi un baton para cadaa tipo de funcion abc
me cacha los errores pero al dar submit me deja pasar y guardar con errores
soy nuevo en esto no se si puedas ayudarme
y mi segunda pregunta como valido para escribir puras mayusculas se puede en la libreria no me funciona
saludos
Gracias! implementando en mi web, muchas gracias r la info.
Oie una pregunta sera muy nob pero no puedo cambiar el color de los mensajes ya trate de realizar dicho evento pero no me sale si pudieras ayudarme con esto te lo agradecería bastante y gracias por la info me ha ayudado bastante ^^.
bueno listo ya vi como modificarlo aun así gracias por el aporte muy bueno
si la api no valida y como quiera te deja correr el sistema, es porque solo se ejecuta en una pantalla
recuerda tener el src antes de donde empieza tu form
de preferencia en todos, no hagas el API global, porque solo funciona una vez
experiencia propia
pero ya lo solucione 🙂
Hola me gusta este validator mas que cualquier otro con diferencia mas que nada por lo abierto que es y las multiples posibilidades de personalización.
Lo único que necesitaria es saber como puedo enviar una consulta por post a php y que en funcion del resultado me devuelva true o false.
Es el típico ejemplo en el que comprueba si el email esta en uso.
Gracias por el aporte, estoy tratando de descargarlo desde la pagina, pero los enlaces estan desactualizados, no he podido descargarlos (documentacion y ejemplos), ¿algún compañero podría subirlo nuevamente, indicar un link o pasarlo a mi correo?. Muchas gracias de antemano