Pues les cuento un preámbulo
Una de las cosas que menos me gusta es estar repitiendo código (recordemos -DRY-) entonces, pues cuando deseaba validar un formulario siempre andaba buscando cual opción era la mejor, y hay muchas opciones y son excelentes en lo que hacen, sin embargo todas tenían un punto débil, por ejemplo que no soportaban ajax, es decir terminaban de validar y se seguían (enviaban el formulario), otros me mandaban mensajes de errores de validación en ciertos colores y en cierto lugar que si bien es correcto, a veces en muchos proyectos no va el estilo o simplemente quieren ponerle un alert o similar.
Bajo ese preámbulo y recordando que siempre quise hacer un validado de formularios con Javascript (hace años hice uno chafita con Javascript).
Entonces pensé por que no hacer uno que fuera muy simple de usar y que no fuera obtrusivo, y así fue como desarrolle simpleValidate que es un plugin el cual como su nombre lo dice solo es un validador de formularios y nada mas.
Les presento a:
simpleValidate – Jquery Plugin
A continuación pongo las características.
- Fácil de usar
- Extremadamente Ligero 2kb (minifed)
- Compatible con Jquery 1.5.2
- No requiere CSS especial
- No obtrusivo
- Posibilidad de inyectar algún tipo de alert especial mediante sus settings
- Completamente personalizable
- Soporta expresiones regulares
- Y valida checkboxes
Su uso es muy simple, solo necesitamos de Jquery y del plugin
<script src="jquery.1.5.2.min.js" type="text/javascript"></script> <script src="simpleValidate.1.6.min.js" type="text/javascript"></script>
Y ejecutamos el plugin donde indicamos el id del Formulario en cuestión
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.1.5.2.min.js" type="text/javascript"></script>
<script src="simpleValidate.1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#testForm").simpleValidate();
});
</script>
</head>
<body>
<form action="try.php" method="post" id="testForm">
<label>Name</label>
<input type="text" name="name" title="valid[Ingrese un nombre valido]" /><hr />
<label>Ingrese una cantidad valida (tipo numero.decimal(2 digitos))</label>
<input type="text" name="cantidad" title="valid[regex,Por favor ingrese un numero con o sin decimales únicamente]" data="^([0-9]+\.?[0-9]{0,2})$" /><hr />
<label>Required</label><input type="checkbox" name="condiciones" value="Required" title="valid[Debes de aceptar los terminos y condiciones]"/>
<input type="submit" value="Guardar datos"/>
</form>
</body>
</html>
Y con esto ya tenemos funcionando el plugin ahora necesitamos indicarle cuales son los campos a validar lo haremos de la siguiente forma.
En cada input que necesitemos, vamos a agregar lo siguiente en el campo (input) que queramos validar
title=”valid[tipo_de_validacion,{params,}]“
Donde los tipos de validación son los siguientes:
- valid[required,mensaje de error] ==> Solo verifica que el campo tenga algún valor y el segundo parametro es lo que mostrara cuando no pase la validación
- valid[email,mensaje de error] => Valida que sea un email valido y si no muestra el mensaje del segundo parametro.
- valid[zip,mensaje de error] => Valida que sea un código postal valido (5 caracteres numéricos) y si no muestra el mensaje del segundo parámetro.
- valid[minlength,mensaje de error,numero_minimo] => Valida que el campo contenga un mínimo de caracteres indicado el el ultimo parámetro
- valid[maxlength,mensaje de error,numero_maximo] => Valida que el campo contenga un máximo de caracteres indicado el el ultimo parámetro
- valid[regex,mensaje de error] => Este forma de validación necesita un parámetro data dentro del input donde venga especificada la expresión regular a validar y si no pasa lanza el error.
- valid[ensaje de error] =>Este solo es aplicable a los checkboxes y solo contiene como argumento el error que mostrara cuando el checkbox no este marcado
.
comentarios recientes