Controles de validación en Asp .NET

Validación de controles en Asp .NET mediante controles ocultos: RequiredFieldValidator, CompareValidator, Rangevalidator, RegularExpressionValidator y ValidationSummary, y validación de la página en el servidor mediante la propiedad Page.IsValid, en VB

El usuario de un programa informático a menudo es impredecible en cuanto a lo que teclea. Por muy claras que nos parezcan las instrucciones y las opciones del programa, es necesario saber si lo tecleado por el usario se adapta a lo esperado o no y, en caso de no serlo, tomar acciones adecuadas que eviten el fallo de la aplicación. Se nos pueden ocurrir muchos ejemplos de ello pero, sin ir más lejos, podemos pensar en la petición del número de teléfono en donde el usuario teclea alguna letra, por lo que no se tratará de un número de teléfono válido.

Capturar lo tecleado por el usuario y comprobar si los datos proporcionados son correctos de acuerdo con la información solicitada es lo que llamamos validación. La tecnología Asp .NET proporciona mecanismos sencillos de validar lo tecleado por el usuario en los formularios Web. Recurre a controles de validación de varios tipos, capaces de realizar comprobaciones útiles como:

  • no dejar en blanco un campo obligatorio (controles de campo requerido)
  • las contraseñas escritas 2 veces no coinciden (controles de comparación)
  • lo tecleado se sale de un rango o difiere de un valor o es igual a un valor (controles de comparación)
  • lo tecleado se adapta a un patrón determinado (controles de expresiones regulares).

Estos controles (Validation controls) llevan a cabo la validación en el servidor. También es posible validar en el cliente gracias a código JavaScript y, en muchas ocasiones, ello puede ser válido para nuestros propósitos, pero la validación en el servidor es necesaria para tareas más complejas en las que la seguridad adquiere mayor importancia.

Los controles de validación de Asp .NET permiten:

  • capturar y validar cualquier cosa enviada por el usuario desde un formulario Web
  • personalizar los avisos de error cuando los datos no pasan la validación
  • escribir validaciones personalizadas de acuerdo a nuestras preferencias.

Todos estos controles son controles Web, se ejecutan en el servidor y generan HTML que es enviado al cliente. La sintaxis básica es similar en todos ellos, aunque hay diferencias en las propiedades que admiten según el tipo de control:

<asp: Validator (control de validación)
Runat="server"
ControlToValidate="Control" (control que es "vigilado" por el Validator)
ErrorMessage="Texto informativo" (texto de información al usuario) />

Los controles de validación de que dispone Asp .NET son:

  • RequiredFieldValidator: comprueba que no se deja en blanco un campo obligatorio
  • CompareValidator: compara lo tecleado por el usuario con:
    • un valor constante
    • el valor de otro control
    • un determinado tipo de datos (String, Date, Integer…)
    • puede usar operadores de comparación (mayor que, menor que, igual, etc.)
  • Rangevalidator: compara lo tecleado por el usuario con un rango de valores
  • RegularExpressionValidator: compara lo tecleado por el usuario con un patrón definido en una expresión regular
  • ValidationSummary: muestra resúmenes de la validación con los mensajes de error.

Es interesante remarcar que podemos usar etiquetas HTML en las cadenas de ErrorMessage con las posibilidades de personalización que ello conlleva.

Archivo WebUIValidation.js

Para que los controles Validation de Asp .NET funcionen es necesario que exista en el servidor Web un archivo llamado WebUIValidation.js de JavaScript. Este archivo de secuencias de comando es generado de manera automática en la instalación de Asp .NET y ha de estar colocado en la ruta:

localhost/aspnet_client/system_web/nº_de_versión_de_Framework/WebUIValidation.js

Si por algún motivo no existe ese fichero, puede ser copiado manualmente desde otro servidor que lo posea o generado de nuevo con la orden “aspnet_regiiis -c“.
WebUIValidation.js contiene todas las funciones de HTML dinámico (DHTML) requeridas para ejecutar en el cliente el código HTML de validación generado por el servido al compilar la página aspx.

Uso de los controles Validation en este ejercicio

Se crean 2 controles TextButton de Asp .NET para escribir en ellos las contraseñas, ambos controles se configuran como texto de tipo contraseña para que no muestren los caracteres tecleados sino asteriscos:

<asp:TextBox id="txtPassword" TextMode="Password"
Width="120" Runat="server" MaxLength="10"
EnableViewState="True"></asp:TextBox>

<asp:TextBox id="txtConfirmar" TextMode="Password"
Width="120" Runat="server" MaxLength="10"
EnableViewState="True"></asp:TextBox>

Se crean 2 controles RequiredFieldValidator (para comprobar si el usuario escribe algo en ambos campos de contraseña):

<asp:RequiredFieldValidator ID="valPassword1" Runat="server"
ControlToValidate="txtPassword" EnableClientScript="True" Display="None"
ErrorMessage="<br><div align=center><b>Contraseña</b> es un campo obligatorio.</div>" />

<asp:RequiredFieldValidator ID="valConfirmar" Runat="server"
ControlToValidate="txtConfirmar" EnableClientScript="True" Display="None"
ErrorMessage="<br><div align=center><b>Confirmar contraseña</b> es un campo obligatorio.</div>" />

También se crea un control CompareValidator para comparar el campo txtContraseña con un valor constante (xxx en este ejercicio) y se crea otro control CompareValidator que comprueba si el contenido de ambas cajas de texto de las contraseñas es idéntico:

<asp:CompareValidator ID="valPassword2" Runat="server" ControlToValidate="txtPassword"
ValueToCompare="xxx" Operator="Equal" EnableClientScript="True" Display="None"
ErrorMessage="<br><div align=center><b>Contraseña</b> no válida.</div>" />

<asp:CompareValidator id="valComparar" ControlToValidate="txtConfirmar" Runat="server"
ControlToCompare="txtPassword" Display="None" EnableClientScript="true"
ErrorMessage="<br><div align=center>Ambas contraseñas deben <b>coincidir</b>.</div>" />

Por último, se crea un control ValidationSummary que configura el resumen de la validación y la manera de mostrar los mensajes de error producidos. Esta etiqueta permite elegir el formato del resumen con las propiedades:

  • ShowSummary, que acepta valores True y False (mostrar el resumen de la validación o no)
  • DisplayMode, que acepta distintos valores (SingleParagraph, BulletList y List, cada uno da un aspecto diferente a la lista de errores encontrados)
  • ShowMessageBox que, si es True, muestra una ventana de mensaje con la lista de errores (similar al método MessageBox.Show de Visual Basic).
<asp:ValidationSummary runat="server" DisplayMode="SingleParagraph"  ID="valSumario"
ShowSummary="True" ShowMessageBox="False" Font-Size="10pt" Font-Names="Verdana"
HeaderText="<div align=center><u>Se han encontrado los siguientes errores</u>: </div>" />

Asp .NET tiene mecanismos para guardar lo capturado en los controles del formulario durante la sesión. Si queremos que lo esrito en las cajas de texto permanezca en ellas aún después de pulsar el botón que envía los datos, debemos configurar la propiedad EnableViewState de los controles TextBox a True, en caso contrario las cajas de texto se vaciarán cada vez que pulsemos el botón de enviar.

Código Visual Basic

Por último, hay que desarrollar el método de Visual Basic que, al pulsar el botón que envía al servidor los datos del formulario, comprueba si la validación ha sido correcta o han surgido errores, para enviarnos a la página web deseada sólo en el primer caso. Este código lo colocamos en el evento Page_Load. Esta manera tan sencilla de saber si lo capturado desde el formulario cumple las condiciones de validación es mediante la propiedad IsValid del objeto Page que devuelve True si no ha habido errores. Para dirigir al usuario hacia la página requerida se usa el método Response.Redirect que puede llevarnos a una página html o aspx, a diferencia del método Server.Transfer que sólo puede llevarnos a una página aspx.

Sub puedePasar (obj As Object, e As EventArgs)
    If Page.IsValid Then
        Response.Redirect("validar2.htm")
    End If
End Sub

Y en la etiqueta del botón que envía los datos añadimos en la propiedad onclick el nombre del método:

<asp:Button ID="cmdEnviar" CausesValidation="True" Runat="server" Text="Enviar datos" OnClick="puedePasar"></asp:Button>