Buscar en el Blog

sábado, 4 de junio de 2011

Validacion de Formularios con jQuery

Hola a todos, en esta ocasión veremos como validar un formulario HTML con la librería jQuery y usando un plugin llamado Validate.

Para esto necesitamos los siguientes archivos:

  1. jQuery: El cual pueden descargarlo desde Aqui
  2. Validate: El plugin de validacion basado en la libreria jQuery, este plugin lo pueden descargar de este enlace.
  3. validacion.js: Este archivo es el que nosotros crearemos.
Manos a la obra:

Primero el script o codigo html de la pagina con el formulario que vamos a validar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/validar.js"></script>
</head>

<body>
<form id="form1" name="form1" method="post" action="www.google.com">
  <p>&nbsp;</p>
  <p>
    <label>nombre
      <input type="text" name="nombre"  />
    </label>
  </p>
  <p>
    <label>email   
      <input name="email" type="text" id="email" />
    </label>
  </p>
  <p>
    <label>contraseña
      <input type="password" name="pass" id="pass" />
    </label>
  </p>
  <p>
    <label>Repetir Contraseña
      <input type="password" name="pass2" id="pass2" />
    </label>
  </p>
  <p>
    <label>
      <input type="submit" name="button" id="button" value="Enviar" />
    </label>
  </p>
  <p>&nbsp;</p>
</form>
</body>
</html>

Lo que nos interesa es el formulario y los componentes, controles o etiquetas que lo conforman, como por ejemplo:

id="form1" 
<input type="text" name="nombre"  />
<input name="email" type="text" id="email" />
<input type="password" name="pass" id="pass" />
  <input type="password" name="pass2" id="pass2" />

Se debe poner atencion a los valores que tienen por "id" y "name", porque son estos valores los que usaremos en la validacion.

Dentro de las etiquetas "head" del documento html, debemos incluir los archivos que valos a usar, como son:
<head>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/validar.js"></script>
</head>

Primero se debe incluir la libreria jquery., luego el plugin y despues el archivo que nosotros vamos a crear, el cual es validar.js.


Los Archivos con extension "js", los he colocado dentro de una carpeta llamada "js", para tener en orden nuestro archivos, es por eso que cuando incluimos los archivos usamos "js/elarchivoaincluior", donde "js" es el directorio o carpeta donde se ubican los script o archivos a incluir.









Ahora el script validar.js

$(document).ready(inicio);
function inicio()
{
    $("#form1").validate
    (
        {
            rules:
            {
                nombre: {
                        required: true
                        }
                        ,
                email:    {
                        email:true
                        }
                        ,
                pass:    {
                        required:true,
                        minlength:8
                        }
                        ,
                pass2:    {
                        required:true,
                        equalTo: "#pass"
                        }   

            }
            ,
            messages:
            {
                nombre: {
                        required: "* Debe Llenar este campo"
                        }
                        ,
                email:    {
                        email:"Debe ingresar una direccion de correo valido"
                        }
               
                       
            }             
        }
    );
  
   
   
}



El resultado sera el siguiente:









Explicacion del Script:

$(document).ready(inicio);
Con esto le indico que cuando la pagina este lista, ejecuta la funcion inicio.


Dentro de la funcion inicio se encuenta la validacion del formulario.


$("#form1").validate({reglas,mensajes})
En la linea de  $("#form1") indicamos que el formulario que contenga el id form1, sea el que recibira o donde se aplicara la validacion.
dentro de validate(), recibe las reglas de validacion y los mensajes a mostrar, sino se colocan los mensajes a mostrara apareceran los mensajes por defecto, que estan en ingles.


rules:
            {
               Nombrecampo: {
                          instruccion:valor,
                          instruccion2:valor2
                        }
             }




En el codigo anterior lo que haces es definir las reglas por cada campo que contenga el formulario, indicando para ellos el nombre del campo y dentro de llaves las instrucciones de la validacion, si son varios campos, estos se separan por una coma.

  rules:
            {
                nombre: {
                        required: true
                        }
                        ,
                email:    {
                        email:true
                        }
                        ,
                pass:    {
                        required:true,
                        minlength:8
                        }
                        ,
                pass2:    {
                        required:true,
                        equalTo: "#pass"
                        }   

            }





Para separar el bloque de reglas de validacion y los mensages de validacion, se usa la coma.

    rules:
            {
               
              aqui las reglas de validacion     

            }
            , //separadas por una coma
            messages:
            {
               
                aqui los mensajes
                      
            }  

Y finalmente el apartado de los mensages de nuestro script


messages:
            {
                nombre: {
                        required: "* Debe Llenar este campo"
                        }
                        ,
                email:    {
                        email:"Debe ingresar una direccion de correo valido"
                        }
               
                       
            } 

Sino se incluye ningun mensaje para un campo validado, entonces se mostrara el mensaje por defecto.

Explicacion de las instrucciones de validacion:

required:true Quiere decir requerido, que debe ser ingresado si o si.
email:true  Quiere decir que debe ser ingresado un email(correo) valido.
minlength:8 Que el numero de digitos minimos a ser ingresado debe ser 8.
equalTo: "#pass"  Igual a, quiere decir que este campo tiene que ser igual a otro campo, pasado como parametro el id del campo, en este caso el id del campo es pass.


Para mas informacion sobre las instrucciones de validate, pueden ingresar a la pagina oficial de jQuery y buscar el apartado del plugin Validation.


Nos vemos... hasta otra oportunidad.







viernes, 3 de junio de 2011

Linux: Mageia 1 Acaba de salir!

¿Que hace a Mageia diferente?

Mageia es acerca de la gente – la gente que hizo y la gente que usa Mageia la distribución Linux. Somos una buena comunidad, y queremos incluir a nuestros usuarios en la comunidad; las personas que se nos unen lo hace aún mejor.
Mageia es acerca de excelencia técnica – nosotros perseguimos la excelencia, así que la gente de Mageia tendrá la mejor experiencia informática que podramos ofrecerle. No importa si eres programador o estudiante, empresario o administrador de sistemas – cualquiera que sea el uso que le des a tu computadora, nos encantará ayudarte a hacer de ello una grata experiencia. Prueba Mageia 1 y compruébalo por ti mismo.
Mageia es sobre calidad – nuestro lanzamiento promete  ser tan sólida y perfecta como Mandriva al máximo; ése es nuestro legado.
Mageia es abierto – estamos comprometidos con la filosofía del software abierto, estamos abiertos a nuevas personas y nuevas ideas, y tenemos un gobierno abierto en nuestra comunidad.
Mageia es Internacional – nuestra comunidad proviene de todas partes del planeta para ayudar a Mageia a “hablar” varios idiomas. La estructura y sostén de Mageia en la comunidad de usuarios han producido hasta ahora excelentes resultados.
Mageia es sobre la diversidad – Mageia ofrece y mantiene aplicaciones de una amplia variedad de grupos de usuarios – con aplicaciones que abarcan desde los videojuegos y música hasta aplicaciones científicas e ingenieriles.
Mageia es acerca del equilibrio – nosotros luchamos por mantener un balance entre tener desarrollos de vanguardia y una experiencia informática estable.
Mageia Linux

¿Por qué elegir Mageia?

¿Aparte de nuestra gran distribución, pensarías? Somos una gran comunidad, y mejoramos a cada momento. Nos preocupamos por cada uno, en el hacer, tratamos de tener la mejor experiencia de usuario. Nos encantaría darte la bienvenida a nuestra comunidad, mientras que por supuesto vas haciendo la instalación de Mageia sin problemas y la puedas usar con alegría.
¿Qué nos hace diferentes? Somos totalmente comunitarios, con todo lo que ésto implica. Nuestra organización es llevada por la comunidad; ninguna gerencia comercial puede imponernos el camino que Mageia debe seguir; tu como usuario de Mageia podrás tener mayo voz en el futuro de ésta distribución que en ningún otro sitio.

En los hombros de Gigantes

Nuestro equipo de desarrolladores, empaquetadores, contribuidores, traductores, administradores de sistemas y analistas han trabajado todos muy duro para brindarte Mageia 1 dentro del plazo concretado.
Y estamos todos muy agradecidos por el magnífico trabajo de la gente en Mandriva, KDE, GNOME, Xfce, LXDE, el equipo del núcleo Linux, la FSF y todas aquellas personas escribiendo software libre – gracias a todos ustedes por inspirarnos a nosotros en crear grandes programas que son parte de la fundación de Mageia.
Queremos llevarlos muy lejos con nosotros hacia el futuro y hacer de Mageia lo mejor que podamos.

¿Qué es Mageia?

Mageia es ambas cosas, una comunidad y una distribución Linux. Encuentra mas sobre ella en:

Google+ Seguidores