dimecres, 9 de febrer del 2011

Validar una fecha con día mes y año en asp.NET. Parte I

Validar una fecha es algo que seguro que toda web necesitará algún día, sea para registrar la fecha de un usuario, para introducir fechas, para confirmar la mayoría de edad de un usuario....

Una manera de hacer esta tarea consiste en poner un TextBox y recoger la fecha separada por barras separadoras, pero esto es algo que suele acarrear problemas. Así que otra opción muy usada consiste en ofrecer unos desplegables con los que el usuario escoge el día, el mes y el año.

Algo como


De esta manera podemos mostrar nombres para los meses, limitar el numero de años que mostramos, devolver mensajes de error personalizados...



Para llevar a cabo esta tarea con éxito hace falta una código en el servidor y en el cliente tanto en c# como en javascript. Empezaremos con el código aspx necesario en la página.


 
Escoge un día.
Escoge un mes.
Escoge un año. *
]]>

Realmente el único validador necesario es el custom ya que nos interesa el resultado final de toda la fecha, aunque podemos poner validadores para cada campo para informar al usuario. Este validador custom tiene una parte de código mínima que es la parte en el servidor, posteriormente añadiremos una validación javascript para hacer mas rápida la detección de una fecha incorrecta y poder informar al usuario sin tener que hacer un postback.

/// 
/// Validar Mayoria de Edad
/// 
protected void ValidateEdad(object sender, ServerValidateEventArgs e)
{
 // custom date validate
 DateTime nacimiento = new DateTime(Convert.ToInt32(ddlAno.SelectedValue), Convert.ToInt32(ddlMes.SelectedValue),
  Convert.ToInt32(ddlDia.SelectedValue));
 if (nacimiento.CompareTo(DateTime.UtcNow.AddYears(-18)) > 0)
  e.IsValid = false;
 else
  e.IsValid = true;
}

En este caso nuestro código comprueba que el usuario sea mayor de edad, pero aquí es un buen sitio para hacer la validación que necesaria. Tened en cuenta que si no se puede parsear la fecha se producirá una excepción que quizás nos interesa capturar y asignar el valor false a e.IsValid;

En la página aspx, dentro de un tag script pondremos:

function isValidDate(source, args) {
 var dayfield = document.getElementById('<%= ddlDia.ClientID%>').value;
 var monthfield = document.getElementById('<%= ddlMes.ClientID%>').value;
 var yearfield = document.getElementById('<%= ddlAno.ClientID%>').value;
 var dayobj = new Date(yearfield, monthfield - 1, dayfield);
 // construir fecha
 if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (dayobj.getFullYear() != yearfield))
  args.IsValid = false;
 else {
  var day18 = new Date(eval(yearfield) + 18, monthfield - 1, dayfield);
  // es mayor de edad?
  if (day18 > new Date())
   args.IsValid = false;
  else
   args.IsValid = true;
 }
}

El truco aquí reside en buscar cada campo que forma parte de la fecha con una llamada a la propiedad ClientID de cada elemento asp.

Una vez localizados el día, mes y año seleccionados intentamos crear una fecha con ellos, después comprobamos que los elementos seleccionados sean los mismos que la fecha resultante. De esta manera, por ejemplo, salvamos errores por seleccionar el 31 de febrero. Finalmente y siguiendo con el ejemplo, comprobamos la mayoría de edad.

Con todo esto tendremos una sólida manera de recoger las fechas de los usuarios en prácticos desplegables para nuestros usuarios.

Mas adelante veremos como popular estos DropDownList de una manera muy cómoda.

Cap comentari:

Publica un comentari a l'entrada