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 los controles devalidación derivan de la clase

System.Web.UI.WebControls.BaseValidator y por tanto comparten una serie de
propiedades entre las que destacan:

- 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 Controles de Validación

Figura 22.2. Página de 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 System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using 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; TOP: 208px"
runat="server" Width="169px" Height="28px" Text="Enviar">
</asp:Button>

</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 22.6.Personalización de la validación para los controles

RequiredFieldValidator y RangeValidator.

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