|
|
Cursos de Creacion de Páginas Web en CD. Recíbalos contra reembolso en su domicilio Garantía: si no le gustan, le devolvemos el dinero. Tel.: 96 169 19 76 |
|
|
|
|
Podemos aplicar diversos recursos JavaScript combinados con HTML para mejorar el formulario de reservas en diferentes aspectos, no sólo estéticos sino funcionales.
Un punto sumamente importante en la comunicación con el cliente son los datos y la veracidad de los mismos, por ende todos los datos son importantes en una reserva e inclusive en una consulta.
Las validaciones de algunos componentes del formulario están prácticamente realizadas, pero las fechas no están siendo verificadas correctamente.
Para lograr un resultado óptimo debemos modificar el código HTML. En este caso la fecha se trata sólo de un campo INPUT. Para poder verificar adecuadamente las fechas la situación ideal es que sean tres componentes SELECT donde el usuario pueda seleccionar el día, el mes y el año respectivamente.
Debemos recordar que los datos son almacenados en una tabla dentro de una base de datos, por ende los nuevos campos de formulario referentes a la fecha de llegada, deberán ser verificados y generar un campo “fecha_llegada” para ser almacenado en la tabla que corresponda. Deberemos aplicar el mismo procedimiento con la fecha de salida.
El campo “fecha_llegada” como el campo “fecha_salida” estaban en una sola celda de la tabla; para lograr una estética superior modificaremos esto también.
Agregaremos una fila por debajo de “Fecha de Salida”, seleccionaremos la celda con el botón secundario, seleccionaremos “Dividir Celdas”, y luego indicaremos que deseamos dividir en tres columnas (día, mes, año) tal como se indica en la siguiente figura:
En la primer celda escribiremos “Día” y agregaremos un SELECT con los 31 días del mes:
Luego repetiremos estos pasos con el mes y con el año. Los campos de formulario serán denominados “mes_llegada” y “anio_llegada” respectivamente.
Un detalle: en el campo de formulario referente al mes se puede visualizar el nombre y almacenar un número para que su validación sea más sencilla.
El resultado en el formulario será el siguiente:
Se pueden seleccionar las celdas de fecha de llegada y la celda en blanco y combinarlas para que quede más clara la presentación.
Ahora es el momento de repetir los pasos con la “Fecha de Salida”. Para agilizar el trabajo podemos seleccionar la celda que contiene todos los SELECT refereridos a la fecha de llegada, copiarlos, y pegarlos en la nueva celda de fecha de salida.
Debemos recordar modificar los nombres de los nuevos campos de formulario, para su correcta identificación y posterior validación.
Al finalizar estos pasos veremos lo siguiente:
Con todos estos elementos nos detendremos a analizar nuestra problemática ANTES de realizar nuestro bloque de código JavaScript para la validación de fechas.
Los errores a detectar son:
ü Problema 1: La fecha de salida es anterior a la de llegada.
ü Problema 2: Días 30 o 31 en el mes de Febrero.
ü Problema 3: Días 29 en el mes de Febrero si el año no es bisiesto.
ü Problema 4: Días 31 en meses de 30 días.
Una vez identificados los problemas debemos trabajar con los elementos que utilizaremos para el fin de la validación.
Nuestro primer paso será generar ciertas variables para almacenar todos los datos con la finalidad de manejar en forma más clara la información. Para ello se escribe el siguiente bloque de código:
errores = ‘’;
dia_arribo=parseInt(document.forms[0].dia_llegada.value);
mes_arribo=parseInt(document.forms[0].mes_llegada.value);
anio_arribo=parseInt(document.forms[0].anio_llegada.value);
dia_partida=parseInt(document.forms[0].dia_salida.value);
mes_partida=parseInt(document.forms[0].mes_salida.value);
anio_partida=parseInt(document.forms[0].anio_salida.value);
La función parseInt la utilizaremos para capturar el valor contenido en los campos de formulario como una cantidad entera. La variable “errores” será utilizada para almacenar el mensaje de error que será desplegado en caso de encontrar problemas.
ü Problema 1
Para identificar si la fecha de salida es anterior a la fecha de llegada, realizamos un par de cálculos matemáticos:
arribo=dia_arribo+100*mes_arribo+10000*anio_arribo;
partida=dia_partida+100*mes_partida+10000*anio_partida;
Y luego evaluaremos el contenido de las variables de arribo y de partida:
if (arribo>=partida) errores+='- La fecha de arribo debe ser anterior a la fecha de partida\n';
Aquí vemos como asignamos el mensaje de error en la variable errores. El “+=” es utilizado para acumular los mensajes en la variable y el “\n” para insertar un retorno de carro.
Para poder detectar los demás problemas nos valdremos de la instrucción “switch”, que es un instrucción de selección de JavaScript (equivalente a un “if” múltiple). Esta instrucción evalúa todo el bloque de posibilidades para cada valor que pueda tomar la variable en cuestión.
ü Problema 2 · Problema 3
En caso de que sea el mes de Febrero, al que le corresponde el valor 2, evaluaremos si el día es superior a 29, también debemos verificar que en caso de ser 29 sea en un año bisiesto. Para esto, se evalúa utilizando un conector lógico “y” (“&&” en JavaScript) el día de llegada y el año de llegada. Si día es 29 y el año es distinto (“!=” en JavaScript) del valor 2004, entonces la fecha es incorrecta.
Sino, se trata de una fecha válida ya que sólo trabajamos con algunos años (2001 al 2007, por ejemplo) dentro de los cuales el único bisiesto es el año 2004.
switch (mes_arribo)
{
case 2: if (dia_arribo>29)
{
errores+='- Fecha de arribo inválida\n';
}
else if ((dia_arribo==29) && (anio_arribo!=2004)) errores+='- El año '+anio_arribo+' no es bisiesto, fecha de arribo inválida\n'; break;
ü Problema 4
Detectar la aparición de días 31 en meses que sólo pueden tener 30 es sumamente sencillo utilizando “switch” ya que se definen casos. En caso de valores 4, 6, 9 y 11 que corresponden a los meses de Abril, Junio, Septiembre y Noviembre, el día de llegada debe ser menor o igual a 30 o en caso contrario estamos ante una fecha errónea.
case 4:
case 6:
case 9:
case 11: if (dia_arribo>30) errores+='- Fecha de arribo inválida\n';
}
Hasta aquí hemos planteado cómo encontrar los errores. La porción de código JavaScript completa que se encarga de esta tarea es la siguiente:
errores = ‘’;
dia_arribo=parseInt(document.forms[0].dia_llegada.value);
mes_arribo=parseInt(document.forms[0].mes_llegada.value);
anio_arribo=parseInt(document.forms[0].anio_llegada.value);
dia_partida=parseInt(document.forms[0].dia_salida.value);
mes_partida=parseInt(document.forms[0].mes_salida.value);
anio_partida=parseInt(document.forms[0].anio_salida.value);
arribo=dia_arribo+100*mes_arribo+10000*anio_arribo;
partida=dia_partida+100*mes_partida+10000*anio_partida;
if (arribo>=partida) errores+='- La fecha de arribo debe ser anterior a la fecha de partida\n';
switch (mes_arribo)
{
case 2: if (dia_arribo>29)
{
errores+='- Fecha de arribo inválida\n';
}
else if ((dia_arribo==29) && (anio_arribo!=2004)) errores+='- El año '+anio_arribo+' no es bisiesto, fecha de arribo inválida\n'; break;
case 4:
case 6:
case 9:
case 11: if (dia_arribo>30) errores+='- Fecha de arribo inválida\n';
}
switch (mes_partida)
{
case 2: if (dia_partida>29)
{
errores+='- Fecha de partida inválida\n';
}
else if ((dia_partida==29) && (anio_partida!=2004)) errores+='- El año '+anio_partida+' no es bisiesto, fecha de partida inválida\n'; break;
case 4:
case 6:
case 9:
case 11: if (dia_partida>30) errores+='- Fecha de partida inválida\n';
}
El siguiente paso será desplegar la variable que contiene estos mensaje de error que eventualmente pudieran haberse acumulado en un cuadro de diálogo, y evitar que el formulario sea enviado. Para el control de envío usaremos una variable denominada “document.returnValue”. El caso sin errores se dará cuando la variable “errores” se encuentre vacía.
if (errores=='')
{
document.returnValue=true;
}
else
{
errores='El/Los siguiente(s) campo(s) tiene(n) que estar correctamente completado(s):\n\n'+errores;
alert(errores);
document.returnValue=false;
}
En este punto nos encontramos con las dos fechas correctamente validadas. Sin embargo, cada una de ellas utiliza tres campos de formulario y nuestra intención es guardar dichos tres campos un único elemento de la tabla dentro de nuestra base de datos.
Para combinar estos tres campos en uno solo, debemos recurrir nuevamente a la combinación de HTML y JavaScript. En HTML existe un tipo de campo de formulario denominado “hidden” (oculto). Este campo no se ve dentro del navegador, pero si se puede utilizar para enviar valores a través del formulario.
Para crear un campo de este tipo, presionaremos el botón secundario del ratón sobre el formulario, luego seleccionaremos la opción “Propiedades del Formulario” y luego la opción “Avanzadas...”.
Aparecerá una pantalla para agregar, modificar o quitar los campos ocultos, tal como muestra la siguiente imagen:
Presionaremos el botón Agregar y crearemos dos variables, una para la fecha de llegada y otra para la fecha de salida. Los valores que les asignaremos serán simbólicos, ya que estos serán modificados por nuestro JavaScript dependiendo de los valores asignados al resto de los campos de fecha.
Aquí tenemos una imagen de cómo ingresar dichos campos:
El resultado en la pantalla no se notará, ya que como dijimos, se trata de un campo oculto. Sin embargo, el codigo HTML generado será:
<input type="hidden" name="fechallegada" value="01/01/2002">
El próximo paso será asignar las fechas validadas por separado mediante JavaScript a estos nuevos campos de formulario. Esto lo realizaremos únicamente en caso que no existan errores. Estos nuevos campos de formulario serán los únicos campos con relación a las fechas que debemos enviar a la base de datos. Aquí el código:
if (errores=='')
{
document.forms[0].fechallegada.value = document.forms[0].dia_arribo.value + ‘/’ + document.forms[0].mes_arribo.value + ‘/’ + document.forms[0].anio_arribo.value;
document.forms[0].fechasalida.value = document.forms[0].dia_partida.value + ‘/’ + document.forms[0].mes_partida.value + ‘/’ + document.forms[0].anio_partida.value;
document.returnValue=true;
}
Finalmente, debemos colocar una pequeña porción de código HTML (en amarillo) en el campo de formulario que realiza el envío, así es interceptado por el código de validación JavaScript que acabamos de terminar:
<input type="submit" onclick="validarForm(); return document.returnValue" value="Enviar">
Código fuente completo:
En la sección HEAD:
errores = ‘’;
dia_arribo=parseInt(document.forms[0].dia_llegada.value);
mes_arribo=parseInt(document.forms[0].mes_llegada.value);
anio_arribo=parseInt(document.forms[0].anio_llegada.value);
dia_partida=parseInt(document.forms[0].dia_salida.value);
mes_partida=parseInt(document.forms[0].mes_salida.value);
anio_partida=parseInt(document.forms[0].anio_salida.value);
arribo=dia_arribo+100*mes_arribo+10000*anio_arribo;
partida=dia_partida+100*mes_partida+10000*anio_partida;
if (arribo>=partida) errores+='- La fecha de arribo debe ser anterior a la fecha de partida\n';
switch (mes_arribo)
{
case 2: if (dia_arribo>29)
{
errores+='- Fecha de arribo inválida\n';
}
else if ((dia_arribo==29) && (anio_arribo!=2004)) errores+='- El año '+anio_arribo+' no es bisiesto, fecha de arribo inválida\n'; break;
case 4:
case 6:
case 9:
case 11: if (dia_arribo>30) errores+='- Fecha de arribo inválida\n';
}
switch (mes_partida)
{
case 2: if (dia_partida>29)
{
errores+='- Fecha de partida inválida\n';
}
else if ((dia_partida==29) && (anio_partida!=2004)) errores+='- El año '+anio_partida+' no es bisiesto, fecha de partida inválida\n'; break;
case 4:
case 6:
case 9:
case 11: if (dia_partida>30) errores+='- Fecha de partida inválida\n';
}
if (errores=='')
{
document.forms[0].fechallegada.value = document.forms[0].dia_arribo.value + ‘/’ + document.forms[0].mes_arribo.value + ‘/’ + document.forms[0].anio_arribo.value;
document.forms[0].fechasalida.value = document.forms[0].dia_partida.value + ‘/’ + document.forms[0].mes_partida.value + ‘/’ + document.forms[0].anio_partida.value;
document.returnValue=true;
}
else
{
errores='El/Los siguiente(s) campo(s) tiene(n) que estar correctamente completado(s):\n\n'+errores;
alert(errores);
document.returnValue=false;
}
En la sección BODY:
<input type="hidden" name="fechallegada" value="01/01/2002">
<input type="hidden" name="fechasalida" value="01/01/2002">
<Input type="submit" onclick="validarForm(); return document.returnValue" value="Enviar">
Curso de Frontpage 1997, 2000, 2002, XP. Curso de creación y diseño de páginas web con Frontpage
Curso de creación y diseño de páginas web con Dreamweaver
