Marco Besteiro y Miguel Rodríguez Controles de Validación ASP.NET. Controles ASP.NET de validación. Controles de validación. Los controles de validación permiten validar los datos introducidos por el usuario. La validación se lleva a cabo cuando se pulsa un control de tipo botón. Los controles que pueden lanzar una validación son: - Button HtmlButton HtmlInputButton HtmlInputImage ImageButton LinkButton También puede forzarse la validación utilizando el método Page.Validate. Tras lanzar la validación, si es pasada, se pondrá a true la propiedad IsValid de la clase Page y en caso contrario, se pondrá a false. Los controles de validación realizan la validación del control de cliente en el servidor. No obstante, si el navegador del cliente lo soporta (soporte DHTML, Internet Explorer 4.0 y superior), estos controles generan código JScript de cliente para que la validación se haga antes de que el formulario sea enviado al servidor. Todos validación derivan de la clase System.Web.UI.WebControls.BaseValidator y por tanto comparten una serie de propiedades entre las que destacan: - - los controles de ErrorMessage: esta propiedad permite indicar el texto que se mostrará al usuario en el control de validación cuando introduzca un valor incorrecto en el control que se esté validando. Es importante tener en cuenta que el mensaje de error se muestra en el control de validación y que además se añade junto con el resto de mensajes de validación al control ValidationSummary, si es que lo hay en el WebForm. Si se desea que el mensaje de error sólo aparezca en el control de validación que lo lanza, ha de indicarse el mensaje en la propiedad Text del control de validación, en lugar de en la propiedad ErrorMessage. ControlToValidate: esta propiedad indica el ID del control que se está validando. Display: Si el valor de esta propiedad es None, el texto contenido en la propiedad ErrorMessage se muestra en el sumario (ValidationSummary), y si no, se muestra sobre el control que ha causado el error. RequiredFieldValidator. Este control verifica que el campo al que está asociado se ha rellenado. La propiedad ControlToValidate permite indicar a que control se asocia. Si se incluye un control RequiredFieldValidator a una página Web ASP.NET sin asociarle un control al que validar, al ejecutar la aplicación se mostrará una página de error. 1/18 1 Marco Besteiro y Miguel Rodríguez Controles de Validación Figura 22.1. Página de error indicando que el control RequiredFieldValidator no está asociado a control alguno que validar. Por ejemplo, supónga que se dispone de una aplicación llamada EjemploRequiredFieldValidator en la que la primera página es una página de control de usuario y clave. 2/18 2 Marco Besteiro y Miguel Rodríguez Figura 22.2. Página de Controles de Validación ejemplo sobre la que probar el control RequiredFieldValidator. Se desea mostrar el mensaje Debe introducir un nombre de usuario, en caso de que al pulsar el botón Enviar la caja de texto correspondiente a la etiqueta Usuario no haya sido rellenada. El primer paso que se ha de dar es poner la propiedad CausesValidation del botón Enviar a true. De este modo, cada vez que se pulse el botón Enviar se provocará una validación. El siguiente paso es añadir al formulario Web un control RequiredFieldValidation y asociar su propiedad ControlToValidate con la caja de texto TextBox1, que es en la que se debe introducir el nombre de usuario. Además, se debe indicar en la propiedad ErrorMessage -o bien en Text, si se desea que el mensaje de error sólo aparezca en el control de validación- el mensaje que se desea mostrar si no se rellena la caja de texto TextBox1. 3/18 3 Marco Besteiro y Miguel Rodríguez Controles de Validación Figura 22.3. Vista diseño de la página con el control RequiredFieldValidator. Si se observa el código de WebForm1.aspx.cs se verá que se ha añadido el control RequiredFieldValidator: using using using using using using using using using using System; System.Collections; System.ComponentModel; System.Data; System.Drawing; System.Web; System.Web.SessionState; System.Web.UI; System.Web.UI.WebControls; System.Web.UI.HtmlControls; namespace EjemploReqFieldValidator { /// <summary> /// Summary description for WebForm1. /// </summary> public class WebForm1 : System.Web.UI.Page { protected System.Web.UI.WebControls.TextBox TextBox1; protected System.Web.UI.WebControls.TextBox TextBox2; protected System.Web.UI.WebControls.Label Label1; protected System.Web.UI.WebControls.Label Label3; protected System.Web.UI.WebControls.RequiredFieldValidator RequiredFieldValidator1; protected System.Web.UI.WebControls.Button Button1; … 4/18 4 Marco Besteiro y Miguel Rodríguez Controles de Validación ... ... En el código HTML de la página WebForm1.aspx se puede ver que también se ha añadido el control de validación y que se han indicado los valores de las propiedades ControlToValidate, ErrorMessage, etc... <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="EjemploReqFieldValidator.WebForm1" %> … … <asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 438px; POSITION: absolute; TOP: 92px" runat="server" Width="144px" Height="22px"> </asp:TextBox> <asp:Label id="Label1" style="Z-INDEX: 103; LEFT: 302px; POSITION: absolute; TOP: 95px" runat="server" Width="121px" Height="29px">Usuario: </asp:Label> … … <asp:RequiredFieldValidator id="RequiredFieldValidator1" style="Z-INDEX: 106; LEFT: 328px; POSITION: absolute; TOP: 255px" runat="server" Width="272px" Height="38px" ErrorMessage="Debe Introducir el nombre de Usuario" ControlToValidate="TextBox1"> </asp:RequiredFieldValidator> <asp:Button id="Button1" style="Z-INDEX: 107; LEFT: 368px; POSITION: absolute; runat="server" Width="169px" Height="28px" Text="Enviar"> </asp:Button> TOP: 208px" </form> </body> </HTML> Al ejecutar la aplicación no aparecerá el control RequiredFieldValidator1. Éste sólo se mostrará si se realiza una validación en el servidor (tras pulsar el botón Button1) y si la caja de texto se ha dejado en blanco. 5/18 5 Marco Besteiro y Miguel Rodríguez Controles de Validación Figura 22.4. Resultado de pulsar el botón Enviar sin rellenar el campo usuario. El control RequiredFieldValidator muestra el mensaje de error. Esta es la validación básica. Es posible controlar en mayor grado la validación aprovechando la propiedad IsValid de la clase Page. Por ejemplo, podría hacerse que la etiqueta Usuario: cambie su color a rojo mientras no se introduzca un nombre de usuario. Un modo sencillo de implementarlo es utilizar el método Button1_Click: private void Button1_Click(object sender, System.EventArgs e) { if (Page.IsValid == true) { Label1.ForeColor = Color.Black; } else { Label1.ForeColor = Color.Red; } } No obstante, si se ejecuta la aplicación se puede ver que no hace lo esperado. El motivo es que la propiedad EnableClientScript del control RequiredFieldValidator1 está a true, lo que quiere decir que si el navegador lo permite, la validación se hará en el cliente (con código JScript) y todo código puesto en el servidor no llegará a ejecutarse. Si se cambia esta propiedad a false, la aplicación funcionará según lo esperado. 6/18 6 Marco Besteiro y Miguel Rodríguez Controles de Validación En caso de que no se introduzca valor alguno en la caja de texto del Usuario, la etiqueta Usuario se pondrá en rojo. Figura 22.5. Personalización de la validación realizada en el método Button1_Click. La aplicación mostrada ha sido realizada utilizando el entorno de diseño de Visual Studio .NET. Por tal motivo, el código de respuesta a la pulsación del botón Enviar (Button1) se ha generado por defecto en el fichero WebForm1.aspx.cs, en concreto en el método Button1_Click. No obstante, este código podía haberse introducido directamente en el fichero WebForm1.aspx, como un script. Es importante indicar que este script puede ser de servidor (runat=server) o de cliente (por defecto, si no se indica). En el caso de que sea de cliente sólo puede codificarse en VBScript o en JScript. En el siguiente ejemplo se muestra como incluir el script en el fichero WebForm1.aspx. <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="EjemploReqFieldValidator.WebForm1" %> … … <html> <head> <script language="C#" runat=server> 7/18 7 Marco Besteiro y Miguel Rodríguez Controles de Validación void BotonValidar_Click(Object sender, EventArgs e) { if (Page.IsValid == true) { LabelMensaje.Text = "El campo requerido ha sido rellenado"; } else { LabelMensaje.Text = " El campo requerido está vacío"; } } </script> </head> <body> … … <asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 438px; POSITION: absolute; TOP: 92px" runat="server" Width="144px" Height="22px"> </asp:TextBox> <asp:Label id="Label1" style="Z-INDEX: 103; LEFT: 302px; POSITION: absolute; TOP: 95px" runat="server" Width="121px" Height="29px">Usuario: </asp:Label> … … <asp:RequiredFieldValidator id="RequiredFieldValidator1" style="Z-INDEX: 106; LEFT: 328px; POSITION: absolute; TOP: 255px" runat="server" Width="272px" Height="38px" ErrorMessage="Debe Introducir el nombre de Usuario" ControlToValidate="TextBox1"> </asp:RequiredFieldValidator> … … <asp:Label id="LabelMensaje"… … … <asp:Button id=Button1 text="Validar" OnClick="BotonValidar_Click" runat=server /> </body> </html> CompareValidator. Este control permite comparar el valor introducido por el usuario en el control a validar (propiedad ControlToValidate) con el valor introducido en otro control (propiedad ControlToCompare) ó con una constante (propiedad ValueToCompare). No se deben utilizar a la vez (darles valor) las propiedades ControlToCompare y ValueToCompare. 8/18 8 Marco Besteiro y Miguel Rodríguez Controles de Validación Porr ejemplo: <asp:CompareValidator id="Compare1" ControlToValidate="TextBox1" ControlToCompare="TextBox2" Type="String" runat="server"/> RangeValidator. Este control permite verificar si el valor introducido en el control al que se le asocia (propiedad ControlToValidate) se encuentra entre un valor mínimo (propiedad MinimumValue) y un valor máximo (propiedad MaximumValue). Suponga que se quiere mejorar la aplicación EjemploReqFieldValidator añadiendo un control RangeValidator que controle que la clave introducida en la segunda caja de texto sea un valor entre 0 y 99999 (mostrando un mensaje en el propio control). En principio, con añadirlo directamente en la vista de diseño y actualizar las propiedades ControlToValidate, MinimumValue y MaximunValue es suficiente. El problema viene si se desea especializar el tratamiento que se da a la validación del valor de la clave con el control RangeValidator (por ejemplo, hacer que la etiqueta clave se ponga de color rojo si la clave no se encuentra en el rango permitido). Siguiendo los pasos que se dieron en la aplicación EjemploReqFieldValidator, el código de validación puede introducirse en el método Button1_Click(). No obstante, el código contenido en Button1_Click() pone a rojo la etiqueta usuario si la página no es válida (propiedad Page.IsValid) y ahora es necesario diferenciar si se ha de poner a rojo una de las etiquetas, ninguna o ambas. Esto obliga a tener que distinguir cuándo falla la validación en RequiredFieldValidator1 y cuándo en RangeValidator1. La solución consiste en invocar por separado al método Validate de cada uno de los controles y preguntar por la propiedad IsValid de cada uno de los controles. ... ... private void InitializeComponent() { this.Button1.Click += new EventHandler(this.Button1_Click); this.CustomValidator1.ServerValidate += new System.Web.UI.WebControls.ServerValidateEventHandler( this.CustomValidator1_ServerValidate); this.Load += new System.EventHandler(this.Page_Load); } private void Page_Init(object sender, EventArgs e) { // // CODEGEN: This call is required by the ASP.NET Web //Form Designer. 9/18 9 Marco Besteiro y Miguel Rodríguez Controles de Validación // InitializeComponent(); RangeValidator1.Type = ValidationDataType.Integer; RangeValidator1.MinimumValue = "0"; RangeValidator1.MaximumValue = "99999"; } ... ... private void Button1_Click(object sender, System.EventArgs e) { RequiredFieldValidator1.Validate(); if (RequiredFieldValidator1.IsValid == true) { Label1.ForeColor = Color.Black; } else { Label1.ForeColor = Color.Red; } RangeValidator1.Validate(); if (RangeValidator1.IsValid == true) { Label2.ForeColor = Color.Black; } else { Label2.ForeColor = Color.Red; } } Al ejecutar la aplicación, si la clave no es correcta, sólo se pondrá en rojo la etiqueta Clave. 10/18 10 Marco Besteiro y Miguel Rodríguez Controles de Validación Figura para 22.6. Personalización de la validación RequiredFieldValidator y RangeValidator. los controles RegularExpresionValidator. Este control verifica si el valor del control de entrada al que está asociado sigue una determinada expresión regular. Este tipo de validación es interesante para números de teléfono, direcciones de e-mail, fechas... La sintaxis de la expresión regular difiere en función de si la validación se realiza en el cliente o en el servidor. Si la validación es en el servidor se utiliza System.Text.RegularExpressions.RegEx para definir la expresión regular. Si la validación es en el cliente se utiliza JScript para la expresión regular. Visual Studio ofrece un asistente de generación de expresiones regulares al que se puede acceder desde la ventana de propiedades al configurar el control de tipo RegularExpresionValidator (en concreto, desde la propiedad ValidationExpresión). 11/18 11 Marco Besteiro y Miguel Rodríguez Controles de Validación Figura 22.7. Utilización del cuadro de diálogo editor de expresiones regulares. En el siguiente ejemplo se utiliza una expresión regular y el control RegularExpresionValidator para comprobar si el valor introducido en la caja de texto Clave es un número de 5 dígitos. La expresión regular es: ^\d{5}$ Tras configurar las propiedades del control RegularExpresionValidator1 desde la ventana de propiedades se ha de añadir el código de validación en el método Button1_Click(). private void Button1_Click(object sender, System.EventArgs e) { RequiredFieldValidator1.Validate(); if (RequiredFieldValidator1.IsValid == true) { Label1.ForeColor = Color.Black; } else { Label1.ForeColor = Color.Red; } RangeValidator1.Validate(); if (RangeValidator1.IsValid == true) 12/18 12 Marco Besteiro y Miguel Rodríguez Controles de Validación { Label2.ForeColor = Color.Black; } else { Label2.ForeColor = Color.Red; } RegularExpressionValidator1.Validate(); if (RegularExpressionValidator1.IsValid == true) { Label2.ForeColor = Color.Black; } else { Label2.ForeColor = Color.Red; } } Al ejecutar la aplicación, si se introduce una clave que no tenga 5 dígitos, el resultado es el de la figura 22.8: Figura 22.8. Personalización del tratamiento asociado al control RegularExpresionValidator. CustomValidator. 13/18 13 Marco Besteiro y Miguel Rodríguez Controles de Validación Permite definir la validación que se va a aplicar a un control. Para crear una función de validación se ha de programar un manejador para el evento ServerValidate. Este evento recibe un objeto ServerValidateEventArgs como parámetro. La propiedad Value de este objeto contiene el string con el contenido del control a validar. El resultado de la validación se almacena en la propiedad IsValid del objeto ServerValidateEventArgs (si es false o es puesto a false, se muestra el control CustomValidator). Si se desea crear una función de validación del lado del cliente se ha de introducir un script con tal función en la página .aspx e indicarla en la propiedad ClientValidationFunction del control CustomValidator. Debido a que esta función se va a ejecutar en el cliente, debe ser escrita en VBScript o en JScript. Supónga que, en el ejemplo EjReqFieldValidator, se quiere controlar que si la suscripción de un usuario ha expirado, se le indique. En este caso se va a controlar únicamente que si el usuario es Pepe hay que avisarle de que debe revisar su suscripción. El primer paso es añadir un control CustomValidator (CustomValidator1) y dar los siguientes valores a sus propiedades: - ControlToValidate = TextBox1 EnableClientScript = false ErrorMessage = “debe usted actualizar su subscripción” Tras este paso se ha de codificar el método CustomValidator1_ServerValidate, que responde al evento ServerValidate. private void CustomValidator1_ServerValidate(object source, System.Web.UI.WebControls.ServerValidateEventArgs args) { if (args.Value.Equals("Pepe")) { CustomValidator1.ErrorMessage = args.Value + ", " + CustomValidator1.ErrorMessage; args.IsValid = false; TextBox1.ForeColor = Color.Red; } else { TextBox1.ForeColor = Color.Black; } } Es importante tener en cuenta que si se desea que el control CustomValidator1 muestre su texto, éste tiene que detectar error en la validación. El control CustomValidator1 considera que hay error si se pone la propiedad IsValid de args a false. El resultado de ejecutar la aplicación e introducir como nombre de usuario Pepe será ver el mensaje del control CustomValidator1 y ver también el texto Pepe en rojo. 14/18 14 Marco Besteiro y Miguel Rodríguez Controles de Validación Figura 22.9. Utilización del control CustomValidator. En este caso, la validación ha sido de servidor. Si se desea que sea en el cliente es necesario generar un script de cliente en la página .aspx y poner la propiedad EnableClientScript de CustomValidator1 a true. Además se ha de indicar en la propiedad ClientValidationFunction de CustomValidator1 el nombre de la función del script de cliente. La siguiente función se ha de introducir al final de WebForm1.aspx y sólo muestra el mensaje de error si el usuario es Pepe. ... ... <script language=”vbscript”> Sub CustomValidator1_ClientValidate(val, args) If (args.value = "Pepe") Then args.IsValid = false End If End Sub </script> </body> </html> 15/18 15 Marco Besteiro y Miguel Rodríguez Controles de Validación Como se puede observar, el lenguaje es VBScript y su sintaxis difiere de la de C#. Cuando se crea un script de cliente lo lógico es desear que pueda ejecutarse en cuantos más navegadores sea posible. La mayoría de los navegadores soportan JavaScript y VBScript (JScript también tiene bastante soporte debido a su parecido con JavaScript). Otros lenguajes, como puede ser C#, no son ampliamente soportados por los navegadores, de modo que se recomienda utilizar JavaScript o VBScript para los scripts de cliente. Por defecto, el documento .aspx, cuando se crea con Visual Studio .NET, toma JavaScript como lenguaje por defecto para los scripts de cliente. Esto se puede ver en la ventana de propiedades de la clase DOCUMENT (esta clase representa el documento o página Web generada a partir de la página .aspx). La propiedad en la que se indica es defaultClientScript. Figura 22.10. Vista HTML de la página. El lenguaje de script utilizado es JScript. El lenguaje indicado en la propiedad defaultClientScript es JScript, en cambio, en la página .aspx se indica JavaScript. Realmente son muy parecidos (JavaScript es un subconjunto de Java, definido por Netscape y JScript es un subconjunto de Java definido por Microsoft, con alguna variante. En este caso, el script de cliente se desea que sea VBScript, de modo que debe cambiarse el valor de la propiedad defaultClientScript a VBScript. ValidationSummary. 16/18 16 Marco Besteiro y Miguel Rodríguez Controles de Validación Un control de esta clase permite hacer un sumario de todos los mensajes de error de todos los controles de validación de una página Web. El sumario de errores se muestra por defecto como una lista de puntos (el formato de la lista se puede cambiar mediante la propiedad DisplayMode). La lista de puntos muestra todos los errores que se han detectado al validar la página por los distintos controles de validación pero se refresca en cada nueva validación, es decir, no acumula los errores de anteriores validaciones. Dos propiedades interesantes de la clase ValidationSummary son ShowSummary y ShowMessageBox que permiten mostrar, respectivamente, el listado de mensajes en la página Web o en un cuadro de mensaje. Si se añade un control ValidationSummary a la página WebForm1.aspx de la aplicación EjemploReqFieldValidator (está en la parte izquierda), el resultado es el de la figura 22.11: Figura 22.11. Utilización del control ValidationSummary. Controles ASP.NET definidos por el desarrollador. Los controles definidos por el desarrollador pueden crearse en base a agrupaciones de otros controles e incluso a partir de una página ASP.NET. En muchos casos es posible crear un control ASP.NET a partir de una página ASP.NET simplemente cambiado la extensión .aspx por .ascx y la extensión .aspx.cs por 17/18 17 Marco Besteiro y Miguel Rodríguez Controles de Validación .ascx.cs (o bien copiando el contenido del .aspx y del .aspx.cs sobre un .ascx y un .ascx.cs respectivamente). Es importante saber que en este tipo de controles no se soportan los controles de validación. Si se desea construir un control ASP.NET puro, sin página web asociada, se puede utilizar el asistente, eligiendo la opción Librería de controles Web. Figura 22.12. Cuadro de diálogo de creación de un nuevo proyecto. Opción de creación de un control a medida. El resultado será un control derivado de la clase System.Web.UI.WebControls.WebControl o de una clase derivada de ésta y estará contenido en un fichero .ascx. 18/18 18