Privada de Las Flores 125, Int. 7 y 8, Col. Reforma, Oaxaca de Juárez, Oaxaca

Close Icon
   
Contact Info    
951 128 4578
951 168 4452

Validar formulario con jsvalidate

 

En este ejemplo mostraré como hacer una validación con jsvalidate, lo primero que tenemos que hacer es descargar jsvalidate desde http://www.jsvalidate.com/download/

Crear una página con un formulario simple ocupando la técnica favorita, ya sea con programas como Dreamweaver o a mano.

Entre nuestras etiquetas head tenemos que poner las llamadas a los archivos descarados, fijándonos bien en la ruta.

head quedaría mas o menos así


<HEAD>
<!–llamada de archivos para la validacion–>
<link rel=”stylesheet” type=”text/css” href=”/css/validar.css” >
<script type=”text/javascript” language=”javascript” src=”/jsvalidate/scriptaculous/lib/prototype.js”></script>
<script type=”text/javascript” language=”javascript” src=”/jsvalidate/scriptaculous/src/scriptaculous.js”></script>
<script type=”text/javascript” language=”javascript” src=”/jsvalidate/jsvalidate.js”></script>
</HEAD>

Para aplicar la validación al formulario modificaremos una caja de texto, la caja de texto que tenemos en nuestro formulario es de la siguiente forma

<input type=”text” id=”nombre” name=”nombre” size=”30″ maxlength=”20″ >

Para que la validación tenga efecto tenemos que agregar la clase correspondiente, por ejemplo, para que esta caja de texto que pide un nombre sea obligatoria tenemos que agregare ->class=”jsrequired”<- , entonces el código quedaría de la siguiente manera

<input type=”text” id=”nombre” name=”nombre” size=”30″ maxlength=”20″ class=”jsrequired”>

Así de fácil es agregarle la validación a un formulario con jsvalidate

JSValidate nos permite varios tipos de validación::

jsrequired – El campo debe tener algún tipo de valor.
jsvalidate_number – Cualquier número entero, decimal y negativo.
jsvalidate_digits – Solo números.
jsvalidate_alpha – Solo letras.
jsvalidate_alphanum – Solo letras, números y guiones.
jsvalidate_email – Correo electrónico.
jsvalidate_uscanzip – Códigos postales (Estados Unidos y Canadá).
jsvalidate_usstate – Dos letras en mayusculas de estados de USA.
jsvalidate_usphone – Telefonos.
jsvalidate_creditcard – Valida tarjetas de credito como VISA, MasterCard, American Express.
jsvalidate_ssn – Número de seguro social de USA en el formato: XXXXXXXXX, XXX XX XXXX, o XXX-XX-XXXXX


Si queremos que una caja de texto tenga 2 tipos de validación, simplemente ponemos los 2 nombres en la clase, por ejemplo, si queremos que la caja tenga forzosamente un valor y que este valor sea solo números podemos poner la clase de la siguiente manera class=” jsvalidate_number jsrequired”

Para agregar mas tipos de validación podemos modificar el archivo jsvalidate/jsvalidate.js, solamente tenemos que seguir la estructura del archivo. En el ejemplo ya tengo modificados algunos renglones, le agregué validación para el numero de seguro social mexicano y validación para la curp

En el ejemplo también agrego un popup para generar la curp desde la página, los archivos requeridos para la curp los toma de internet (no están en el ejemplo)


Espero la información y el ejemplo les sea de utilidad 


descargar ejemplo completo

mi dropbox



Post Tagged with , ,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Loading Facebook Comments ...