Validación de controles en Asp .NET

Como programadores, sabemos que el usuario de un programa informático es impredecible en cuanto a lo que teclea. Por muy claras que nos parezcan las instrucciones y las opciones de una ventana de programa, es necesario saber si lo tecleado por el usario se adapta a lo esperado o no y, en caso de ser así, poder 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 sólo letras, 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 nos proporciona una manera sencilla 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:

• 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 llevan a cabo la validación (controles Validation) 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, y Asp .NET tiene un mecanismo sencillo para realizarla.

Los controles Validation 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 los controles Validation 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:Nombre_de_Validator - (control Validation)
Runat="server"
ControlToValidate="Nombre_de_control" - (control que es "vigilado" por el validator)
ErrorMessage="Texto informativo" /> - (texto del aviso de error)

Los tipos de controles Validation 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

Creamos 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>

Creamos 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 creamos un control CompareValidator para comparar el campo txtContraseña con un valor constante (xxx en este ejercicio) y creamos otro control CompareValidator que comprueba si el contenido de ambas cajas de texto 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, creamos 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 .NET)

<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.

Código Visual Basic .NET (bloque de declaración de código)

Por último, hay que desarrollar el método de Visual basic .NET 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 la cabecera del documento aspx (se trata, pues, de un bloque de declaración de código). Tenemos una manera muy sencilla de saber si lo capturado desde el formulario cumple las condiciones de validación, mediante la propiedad IsValid del objeto Page, que devuelve True si no ha habido errores. Para enviar al usuario a la página requerida, usamos 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:

<%@ Page Language="vb" %>

<script runat="server">
Sub pasar (obj As Object, e As EventArgs)
    If Page.IsValid Then
        Response.Redirect("miliuco_validar3.htm")
    End If
End Sub
</script>

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="pasar"></asp:Button>


Código completo de la página aspx

<%@ Page Language="VB" %> 
 
<SCRIPTrunat="server"> 
Sub pasar (obj As Object, e As EventArgs) 
    If Page.IsValid Then 
    'Server.Transfer("miliuco_validar3.aspx") 
    Response.Redirect("miliuco_validar3.htm") 
    End If 
End Sub 
</SCRIPT> 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> 
    <head> 
        <title>Validar contraseña</title> 
        <meta name="GENERATOR" content="Microsoft FrontPage 6.0"> 
        <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1"> 
        <meta name="Author" content="Miliuco"> 
</head>
    <body> 
        <div align="center"> 
            <h2><font face="Verdana">Sitio restringido</font></h2> 
           <FORM id="Form1" method="post" runat="server">
                <table> 
                    <tr width="120"> 
                        <td width="140"><font face="Verdana" size="2">Contraseña:</font></td> 
                        <td> 
                        <asp:TextBox id="txtPassword" TextMode="Password" Width="120" Runat="server" MaxLength="10" EnableViewState="True"></asp:TextBox> 
                        </td> 
                    </tr> 
                    <tr width="120"> 
                        <td width="140"><font face="Verdana" size="2">Repetir contraseña:</font></td> 
                        <td> 
                        <asp:TextBox id="txtConfirmar" TextMode="Password" Width="120" Runat="server" MaxLength="10" EnableViewState="True"></asp:TextBox> 
                        </td> 
                    </tr> 
                </table>
                 <br>
                <asp:Button ID="cmdEnviar" CausesValidation="True" Runat="server" Text="Enviar datos" OnClick="pasar"></asp:Button> 
                <br><br> 
                <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: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:RequiredFieldValidator id="valConfirmar" ControlToValidate="txtConfirmar" EnableClientScript="true" Display="None" Runat="server" 
                ErrorMessage="<br><div align=center><b>Repetir contraseña</b> es un campo obligatorio.</div>" />                 
                <asp:CompareValidator id="valComparar" ControlToValidate="txtConfirmar" ControlToCompare="txtPassword" Display="None" EnableClientScript="true" 
                ErrorMessage="<br><div align=center>Ambas contraseñas deben <b>coincidir</b>.</div>" Runat="server" /> 
                <br> 
                <asp:ValidationSummary runat="server" DisplayMode="SingleParagraph" ShowSummary="True" ShowMessageBox="False" ID="valSumario" 
                HeaderText="<div align=center><u>Se han encontrado los siguientes errores</u>: </div>" Font-Size="10pt" Font-Names="Verdana" /> 
                </div> 
            </FORM > 
        </body> 
</HTML> 

Generación de la página aspx con los controles de validación.

Aquí puedes ver la página dinámica en funcionamiento (contraseña válida: xxx)

Fichero con el código de ejemplo (miliuco_validar.zip - Tamaño 9.10 KB)