Validación de Formularios

Cuando utilizamos campos de selección, formularios y demás suelen existir reestricciones en lo que podemos hacer. Ya sea un campo para una casilla de mail o para un teléfono, el sitio intentará que ingresemos la información de forma correcta, lo cual puede ser mas o menos amigable con el usuario :). Son conoocidos los casos de sitios donde se ingresa algunos campos de formularios y nos dice que hay un error, pero no donde, o bien que no dice nada y no tenemos idea que sucedió, entre otras muchas posibilidades.

Para tratar de dar al usuario las mayores facilidades veremos un poco de validación con javascript, lo cual nos permite verificar los datos que se ingresan antes de que se envíe el formulario, y buscaremos que esta información sea lo más amigable y útil posible.

Comencemos con un simple formulario:

<form method=»post» action=»» name=»form» onsubmit=»return validate(this)»>
<fieldset>
<p><label for=»email1″ class=»left»>Email:</label>
<input type=»text» name=»email1″ id=»email1″ class=»field» value=»» tabindex=»1″ /> *</p>
<p><label for=»email2″ class=»left»>Verificar Email:</label>
<input type=»text» name=»email2″ id=»email2″ class=»field» value=»» tabindex=»2″ /> *</p>
<p><label for=»password1″ class=»left»>Contraseña:</label>
<input type=»password» name=»password1″ id=»password1″ class=»field» value=»» tabindex=»3″ /> *</p>
<p><label for=»password2″ class=»left»>Verificar Contraseña:</label>
<input type=»password» name=»password2″ id=»password2″ class=»field» value=»» tabindex=»4″ /> *</p>
<p><label for=»firsnamename» class=»left»>Nombre:</label>
<input type=»text» name=»name» id=»name» class=»field» value=»» tabindex=»5″ /> *</p>
<p><input type=»submit» name=»register» id=»register» class=»button» value=»Register» tabindex=»6″ /></p>
<p class=»legend»>(* Campos requeridos)</p>
</fieldset>
</form>

Noten algunos detalles que agregamos, macados en negrita:

• onsubmit=»return validate(this)»
  Al enviar el formulario, ya sea haciendo clic en el botón o dando enter, queremos que el contenido del mismo pase por una función de javascript que validará el contenido. La función se llamará validate y pasamos como argumento a la misma el formulario, que al estar haciendo el envío en este preciso momento podemos invocarlo con this.
• id=»email1″
  Debemos poder identificar los campos del formulario con un nombre. Aunque podríamos hacerlo con el atributo name de cada campo, por lo que general queda mas «limpio» el codigo al usar ids. Noten que tenemos un id para cada campo, esto es importante a la hora de poder ir tomando el contenido de cada campo por separado.
• (* Campos requeridos)
  Por último y con el único fin de hacer más amigable las cosas, avisamos que los campos marcados con un asterisco son obligatorios. Esto avisa al usuario de que debe llenarlos y que serán validados.

El siguiente paso es llamar a la función javascript que mencionamos, para esto tendremos dos secciones de código javascript, una que contendrá la validación especifica para este formulario que por ejemplo tiene casillas con nombre de email, contraseña, y dejaremos en un archivo por separado el resto del código que se aplica a cualquier caso de validación, como es mostrar el mensaje de error, etc.

Al final de este artículo están disponibles los archivos para la descarga, dentro de messages.html encontrarán el formulario html con el código javascript específico al formulario y una llamada a un archivo externo messages.js que contiene el código general, además de un archivo css y un archivo de imagen.

Volviendo al código, para validar esta formulario utilizaremos un código como este:

<script type=»text/javascript»>
document.forms.form.email1.focus();

function validate(form) {
// Pasamos contenido de los campos a variables
var name = form.name.value;
var email1 = form.email1.value;
var email2 = form.email2.value;
var password1 = form.password1.value;
var password2 = form.password2.value;

// Expresiones regulares que utilizamos para validar las cadenas de texto segun cada caso
var nameRegex = /^[a-zA-Z]+(([\’\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
var messageRegex = new RegExp(/<\/?\w+((\s+\w+(\s*=\s*(?:».*?»|’.*?’|[^'»>\s]+))?)+\s*|\s*)\/?>/gim);

if(email1 == «») {
inlineMsg(‘email1′,’Ingrese su email.’,2);
return false;
}
if(!email1.match(emailRegex)) {
inlineMsg(‘email1′,’Ha ingresado un email invalido.’,2);
return false;
}
if(email1 != email2) {
inlineMsg(‘email2′,’El mail y su verificacion no coinciden.’,2);
return false;
}

if( (password1 == «») || (password1.length < 6) ) {
inlineMsg(‘password1′,’Ingrese una contraseña de al menos 6 caracteres.’,2);
return false;
}
if(password2 != password1) {
inlineMsg(‘password2′,’La contraseña y su verificacion no coinciden’,2);
return false;
}

if(name == «») {
inlineMsg(‘name’,’Ingrese su nombre.’,2);
return false;
}
if(!name.match(nameRegex)) {
inlineMsg(‘name’,’Ha ingresado un nombre invalido.’,2);
return false;
}

return true;
}
</script>

La primera línea lo único que hace es colocar el foco o cursor de escritura sobre el primer campo del formulario. Luego tenemos la función validate que recibe el formulario que debe validar, «function validate(form) {«, y enseguida dentro de la misma pasamos los contenidos de los campos a variables y preparamos expresiones regulares para validar los distintos casos de email, nombre, mensaje.

El resto del código es simplemente validar cada una de las casillas, con una condición y en caso de que la cumpla llamamos a otra función (inlineMsg, que se encuentra dentro del archivo js externo que mencionamos antes) la cual se encarga de mostrar el mensaje de error.

if(email1 == «») {
inlineMsg(‘email1′,’Ingrese su email.’,2);
return false;
}

En este caso verificamos si la variable email1 contiene el valor vacío, en caso de ser asi llamamos a inlineMsg pasándole como parámetros el id del campo que estamos validando, el mensaje de error y si queremos que el mensaje desaparezca solo luego de 2 segundos.

Con esto deberíamos tener una validación básica pero amigable para el usuario, fundamental para que nuestros sitios sean utilizados y no generen rechazo.

(Créditos: http://www.leigeber.com/2008/04/dynamic-inline-javascript-form-validation/)

Descargar archivos validación JS

En busca del uploader perfecto (Parte I)

Uno de los grandes problemas de usabilidad en Internet es la interacción con el usuario cuando enviamos archivos. Por lo general al hacer descargas tenemos la barra de progreso del navegador que nos indica el estado/velocidad de la transferencia, pero qué sucede cuando enviamos un archivo? Especialmente en el caso de archivos grandes y cuando tenemos conexiones relativamente lentas, tenemos el problema de no saber qué pasa con el envío… Si se detuvo, si sigue funcionando, solo nos queda esperar a ver que pasa.

Aunque hay muchas soluciones parciales a este problema, por ejemplo con animaciones flash o javascript que muestran una barra de progreso simulado, queremos una solución real, que muestre si realmente hay transferencia.

Las soluciones más básicas de envío de archivo suelen funcionar con un formulario html que envía el o los archivos a un script para procesar, un código como este es algo típico:

<form action=»» method=»post» name=»form1″ enctype=»multipart/form-data»>
<input type=»file» name=»file1″ />
</form>

Claro que este tipo de transferencia no nos da ninguna interacción avanzada que indique al usuario el progreso de la transferencia. Para esto vamos a necesitar un script del lado del servidor que se encargue de recibir el archivo. A pesar de que con PHP se pueden hacer unas cuntas cosas, no tenemos la capacidad de acceder directamente al sistema de archivos y ver el progreso del mismo, por lo cual queda descartado el uso del mismo por lo menos para monitorear el progreso de la carga. Sí podemos utilizar PHP para el resto del proceso, como sea insertar en una base de datos, enviar mensajes etc.

El intermediario para esta solución será un script en Perl, llamado Uber-Uploader. Este script requiere de que el servidor soporte scripts Perl, trabajando con también con PHP y Javascript. El sitio de origen de este script lo pueden encontrar aquí: http://uber-uploader.sourceforge.net/. De todas formas ya que al día de hoy no está actualizado a la última versión disponible adjunto un zip con los archivos necesarios.

Una gran ventaja de este script es que no necesitamos modificar mas que la configuración del mismo, sin tener que meternos con el código en Perl.

Volviendo al script, tenemos los siguiente archivos dentro del zip en cgi-bin:

• uu_default_config.pm
• uu_ini_status.pl
• uu_lib.pm
• uu_upload.pl

Estos son los archivos de Perl que deben incluirse en el directorio cgi-bin o donde nuestro servidor ejecute los archivos cgi (si este directorio no existe se puede probar con la raíz del sitio). Es muy importante que los permisos de ejecución esten correctamente configurados para que Apache pueda ejecutar el script. Seteando los permisos en 755 para todos los archivos de cgi-bin no deberíamos tener problema.

El archivo que más nos interesa en este caso es uu_default_config.pm que contiene la configuración general de directorios y filtros. Las opciones más importantes son:

• config_file_name
  Nombre del archivo de configuración, en la segunda parte veremos que podemos tener varias configuraciones.
• temp_dir
  Archivo temporal de carga para el script.
• upload_dir
  Donde quedarán guardados los archivos al ser cargados.
• max_upload
  Tamaño máximo de los archivos.
• redirect_url
  Dirección a donde nos llevará el script al terminar de cargar, donde podremos realizar tareas post carga como interacción con bases de datos etc.
• disallow_extensions
  Extensiones no permitidas de archivo.

Con esto tenemos la configuración del script Perl, ahora veamos la otra parte, PHP y Javascript. En este caso tenemos los siguientes archivos (los que aparecen fuera de cgu-bin en el zip):

• upload.php
• uu_conlib.php
• uu_file_upload.js
• uu_finished.php
• uu_finished_lib.php
• uu_get_status.php

Empecemos por uu_conlib.php, el cual es el archivo de configuración del lado de PHP. Las variables que más nos interesan son:

• $path_to_upload_script
  Define la ruta donde está el script Perl, noten que si el mismo no esta dentro de cgi-bin deberemos modificar la ruta.
• $path_to_ini_status_script
  Lo mismo que para la variable anterior.
• $default_config_file
  Archivo de configuración que utilizará este PHP, útil en caso de usar varias configuraciones.
• $max_upload_slots
  Cantidad máxima de slots de carga, sí, podemos cargar muchos archivos en cola =).
• $progress_bar_width
  Largo de la barra de progreso, más que nada un tema de diseño.

Pasemos al archivo upload.php, archivo que contiene el formulario html y archivo donde se «muestra» el uploader. Aquí podemos agregar variables al formulario las cuales recibiremos al finalizar la carga de los archivos, por ejemplo id de usuarios, campos con descripciones, etc.

Por último tenemos el archivo uu_finished.php, archivo a donde llegamos al terminar la carga. El script procesa la información de los archivos, datos como nombre, tamaño, etc de cada archivo cargado es accesible en este archivo. Por ejemplo para obtener el nombre del primer archivo cargado podemos hacerlo de la siguiente forma:

$_FILE_DATA[0]->getFileInfo(‘name’)

Y en caso de tener varios archivos cargados podemos hacer lo siguiente:

for ($i = 0; $i < count($_FILE_DATA); $i++) {
$filename = $_FILE_DATA[$i]->getFileInfo(‘name’);
$filesize = $_FILE_DATA[$i]->getFileInfo(‘size’);
…
}

Ahora tenemos un panorama general del uso de este script, en la segunda parte veremos como tener varios archivos de configuración, como personalizar el formulario de contacto y los errores más comunes que debemos verificar.

Descargar archivo zip con script Uber Uploader.

El Inicio

Por fin, luego de meses de estar a punto de hacerlo se dió… Aunque la idea estuvo en la vuelta durante años recién con la unión de energías en Trepcom es que llegó el empujón para arrancar. Ahora veremos que sucede, si pasa a tener algún sentido o queda en el olvido, aunque con la ayuda de algunos de los Blogs hermanos que nacen junto a este eso no sucederá.

En teoría este Blog tendrá el objetivo de aportar en temas de programación, desarrollo de sitios Web, Internet y tecnologías relacionadas. Nada muy original, aunque los contenidos intentarán serlo, aportando código, ejemplos, recursos y demás que pueden llegar a interesar a alguien.

Para los curiosos, estos son los Blogs hermanos:

www.rodolfotechera.com
www.hilifer.com

Veamos que sucede =)