/Validatenow

Validatenow its a lightweight easy-to-setup jQuery plugin made to validate HTML forms in a real quick way. For now only validates <input type="text"> y <textarea> form elements, but soon will support other form fields.

Primary LanguageJavaScript

// 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:


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

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

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

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

  1. "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.
  1. "reset": Vacía los valores de los campos del formulario, ocultando el mensaje de error identificado por erroMsg y los estilos asignados con errorMsg. No acepta el parámetro de opciones.
  2. "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