LiveValidation, validación de campos con Ajax

16
4365

LiveValidationLiveValidation 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.

LiveValidation Example

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

16 COMENTARIOS

  1. 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.

  2. 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 ,

  3. 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?

  4. 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

  5. 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 ^^.

  6. 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 🙂

  7. 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.

  8. 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

Comments are closed.