Efecto de (i)Frame con CSS

Los 100 Sitios mas visitados por los Mexicanos (en Agosto de 2006)

Tras una peque�a investigacion y gracias a los datos proporcionados por Alexa, este es el listado de los 100 sitios mas visitados por internautas mexicanos en 2006. Para mi gusto hay un par de sorpresas, no se que diran ustedes.

Validacion de formas no obtrusiva

Una de las cosas mas tediosas en el desarrollo web son las validaciones de formas en javascript. Son odiosas, aburridas y repetitivas.

Para hacer ese trabajo un poco mas sencillo me di a la tarea de crear una clase usando la libreria prototype.

Caracteristicas

• Facil de usar
• Funciona en multiples navegadores (por ahora funciona en explorer y firefox, pero debe funcionar en mas)
• Basada en expresiones regulares
• Extendible

Forma de uso

1. Agregar las siguientes lineas en la cabecera de la pagina<script type="text/javascript" xsrc="prototype.js" mce_src="prototype.js" > </script>
<script type="text/javascript" xsrc="validation.js" mce_src="validation.js" > </script>
<script type="text/javascript">
Event.observe(window,"load",function (){ new Validation('forma'); } ,true);
</script>
   Sustituyendo las rutas para los archivos javascript en donde sea necesario.
2. Agregar el atributo id a la forma igual al parametro que se le pasa al constructor de validacion (en este caso, ‘forma’)
   <form id='forma' action="" method="Post">
3. Agregar class y alt para los campos que se quieran validar. Class definira la regla de validacion que se usara y alt el mensaje que se le presentara al usuario. Si no se incluye el atributo class, el elemento no se validar� y si no se incluye el atributo alt se presentar� un mensaje por default para esa regla (P. ej. “El campo x es requerido”)<input type='text' class='required' alt='Este campo es obligatorio' value=" " />

Y listo, eso es todo

Reglas de validacion incluidas

1. required: El campo tiene que tener al menos un caracter
2. digits: Permite solo numeros
3. nonzero: Permite solo numeros diferentes de cero
4. chars: Permite solamente caracteres entre a y z
5. alpha: Es una combinacion entre digits y chars
6. email: Permite emails validos (Si si, lo se, la validacion no es perfecta, conozco el regexp)
7. date: Permite solo fechas en el formato “YYYY-MM-DD”
8. empty: Si se pone como clase de un campo, este solo sera validado si se encuentra lleno, de lo contrario no se validara. Puede usarse en conjuncion de otra regla para hacer un campo opcional (ver ejemplos)
9. dupe: Esta regla es un poco especial. Requiere que ademas se llene la propiedad title. Despues buscar� el campo cuyo ID sea igual al title. Comparara ambos campos y si son diferentes mandara error. Util por ejemplo para validar campos contrase�a.

Agregar nueva reglas

Para agregar nuevas reglas de validacion, basta con modificar el archivo validation.js, en la funcion initRules, agregando una nueva linea por cada regla. El formato de las reglas es:

a.push( new Rule(”NOMBRE”, REGEXP , “texto de alerta)” ) );

• NOMBRE es el nombre de la regla
• REGEXP es una expresion regular contra la que se validara el campo
• Texto de alerta es el texto por default para esa regla. Para insertar el nombre del campo se puede escribir XXXX y esto sera sustituido por el nombre del campo, por ejemplo: “El campo XXXX debe tener 5 caracteres de longitud”

Ejemplos:

Haz click aqui (abre en ventana nueva)

Bajar codigo fuente y ejemplo

validation.zip

Se aceptan sugerencias y comentarios

« Previous Page

• Categoria

  iphone efectotequila software telcel privacidad rant medios motorola e2 plugin php NonSense SinCategoria libro enchilame historia carton ajeno telecomunicaciones javascript ranking patentes blog NonIT minipost windows wordpress apple fun seguridad video software libre microsoft google meta ensayo firefox linux drm actualidad web mexico programacion

• Hosting

  Este blog esta hospedado en Dreamhost.

  • 500 Gb de HDD y 5 TB de Transferencia mensual
  • Subversion, wordpress, joomla, pligg, mysql, perl, cgi, php, htaccess, RoR y mas.
  • Dominios y subdominios ilimitados.
  • Control completo de tus dns.
  • Un registro de dominio gratis!
  • Excelente soporte tecnico

  
  Si quieres tu propio hosting, utiliza el promocode "masiocode" cuando te registres y obtendras un descuento de 40 dolares el primer año.

• Xbox

• Publicidad

• Contacto

  Si deseas contactarme puedes hacerlo en o deja comentario en alguna de las entradas del blog.

• Blogroll

  • B3co
  • Cumulo de Ideas
  • Efecto tequila
  • G30rg3x
  • GuillermoCastro.com
  • Stallman Facts
  • The *nix Divide