Hoy leo en en digg un articulo de Harry Maugans sobre como crear un div colapsable con Javascript. Es un articulo enoorme para algo que se puede hacer en dos lineas y que se viene haciendo desde el inicio de los tiempos.

El problema con esto es que recibio una cantidad muy considerable de votos (al momento de escribir esto, arriba de 1300) para un articulo taaan sencillo. Y esto es "sorprendente" por dos situaciones

1. Parece haber una gran cantidad de personas que no tienen la mas remota idea de los basicos de la programacion web.
2. El articulo tiene una pesima calidad tecnica. Al darle una revisada por encima puedo ver de menos 3 o 4 errores que tambien son basicos.

Esto es preocupante porque estamos recreando errores que ya se creian superados y estamos enseñando estos problemas a los que no saben.

Por ejemplo, su "solucion" es esta:

<div id="mydiv" style="display:none"><h3>This is a test!<br>Can you see me?</h3></div>
<a href="javascript:;" onmousedown="toggleDiv(’mydiv’);">Toggle Div Visibility</a>

• Pone una liga que no es una liga. Grr..
• Usa onmousedown. Si el usuario hace click y se arrepiente antes de soltar el mouse, de cualquier manera se lanzara el evento. Usa onclick en su lugar.
• Agrega comportamientos al codigo, para cosas rapidas esta bien, pero a la larga se vuelve una pesadilla de mantenimiento
• Es obtrusivo, si Javascript esta deshabilitado, el contenido no se podra ver nunca.

Me parece un poco triste que este tipo de articulos sean "noticia". Es muy notorio que hay tres grupos profesionales en el area. Los que estan generando los cambios en la industria, por ejemplo los que crearon prototype, scriptaculous, moo.fx, etc, los que les siguen los pasos y los que no tienen la menor idea.

Ser del primer grupo no es facil, requiere talento y dedicación, eso a veces es mucho pedir, pero ser del segundo grupo no es tan dificil, lo requiere un poco de esfuerzo y de ganas de ser mejor. Como ya dije en este post, hay maneras muy sencillas de estar informado de los últimos acontecimientos en el area. Solo falta dedicarle un poco de tiempo a nuestro desarrollo profesional, pues las herramientas estan ahi, al alcance de todos.

Por favor, no volvamos a discutir si es mejor usar tablas o css… ya es tiempo de dar el salto.

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