// Versión en Español
Validatenow es un pequeño plugin para jQuery para validar formularios de html de manera rápida. Por ahora solo valida elemento <input type="text">
, <select>
y <textarea>
, en un futuro cercano se agregará soporte a otros elementos.
#Modo de uso:
-
Declara una versión de jQuery dentro del
<head>
de tu página (preferiblemente la última). Ejemplo:<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
-
Declara el js del plugin validatenow luego del de jQuery. Ejemplo:
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="/ruta/del/plugin/jquery.validatenow.min.js" type="text/javascript"></script>
</head>
-
Dentro de la función que responde al evento ready de document, haz la llamada de validate now. Ejemplo:
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="/ruta/del/plugin/jquery.validatenow.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (){
$(form#iddelform).validatenow({
errorClass: "error",
req: "req",
onError: function (){
$(".mensajeerror").show();
}
});
})
</script>
</head>
-
Añade las clases necesarias en tu html para que validatenow reconozca los datos requeridos y sus tipos. Ejemplo:
<form id="iddelform"> <input type="text" /> <!-- Campo no requerido --> <input type="text" class="req" /> <!-- Campo requerido de texto --> <input type="text" class="req num" /> <!-- Campo requerido que solo acepta números --> <input type="text" class="req email" /> <!-- Campo requerido de tipo email --> <input type="text" class="num" /> <!-- Campo no requerido que solo acepta núºmeros, solo valida este campo cuando has introducido un valor --> <input type="text" class="email" /> <!-- Campo no requerido de tipo email, solo valida este campo cuando has introducido un valor --> <input type="submit" />
</form>
#Sintaxis:
La manera de invocar Validatenow es la siguiente:
$("form[name=nombreformulario]").validatenow( metodo, [opciones] );
El parárametro metodo
acepta un String, los métodos que puedes utilizar son los siguientes:
- "init": Invocas a Validatenow para que valide el formulario de acuerdo a las clases de css que agregaste en tu código html. Este método acepta un segundo parámetro de tipo objeto o null, que puede tener los siguientes llaves de nombre:
- req <String>: Clase css a utilizar para indicar a Validatenow que un campo es requerido (Ojo: no utilizar el punto al comienzo del string). Valor por defecto: "req".
- errorClass <String>: Clase css con que se estilizará un campo de input en caso de que Validatenow verifique que su valor no coincide con el formato requerido (Ojo: no utilizar el punto al comienzo del string). Valor por defecto: "error.msg".
- errorMsg <String>: Clase css con que se identificará el mensaje de error que se mostrará en caso de que Validatenow verifique que el formulario no es válido (Ojo: no utilizar el punto al comienzo del string). Valor por defecto: "error.msg".
- onError <Function>: Callback a llamar en caso de que Validatenow encuentre al formulario inválido. Nota: Si este valor es asignado, Validatenow no mostrará el mensaje de error identificado por
errorMsg
automáticamente. - onSubmit <Function>: Callback a llamar en caso de que Validatenow verifique que el formulario sea vá- Nota: Al asignar esta función, el submit del formulario no se hará automáticamente, a menos que el valor de retorno de la funció sea
true
. Es ideal para utilizar adicionalmente una llamada a AjaxSubmit, por ejemplo.
- "reset": Vacía los valores de los campos del formulario, ocultando el mensaje de error identificado por
erroMsg
y los estilos asignados conerrorMsg
. No acepta el parámetro de opciones. - "clean": Casi idéntico al método
reset
, solo que deja los valores de los campos del formulario intacto.
#Errores conocidos
-Al utilizar el método reset
, se borrará también el valor de todos los input de tipo hidden, usar con precaución
// English version coming soon