Controles ASPNET Validacion

Marco Besteiro y Miguel Rodrguez Controles de Validacin
1/18 1

ASP.NET. Controles ASP.NET de validacin.

Controles de validacin.
Los controles de validacin permiten validar los datos introducidos por el usuario.
La validacin se lleva a cabo cuando se pulsa un control de tipo botn. Los controles
que pueden lanzar una validacin son:
- But t on
- Ht ml But t on
- Ht ml I nput But t on
- Ht ml I nput I mage
- I mageBut t on
- Li nkBut t on

Tambin puede forzarse la validacin utilizando el mtodo Page. Val i dat e.
Tras lanzar la validacin, si es pasada, se pondr a t r ue la propiedad I sVal i d de la
clase Page y en caso contrario, se pondr a f al se.

Los controles de validacin realizan la validacin 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 cdigo J Script de cliente para que la validacin
se haga antes de que el formulario sea enviado al servidor.

Todos los controles de validacin derivan de la clase
Syst em. Web. UI . WebCont r ol s. BaseVal i dat or y por tanto comparten una serie de
propiedades entre las que destacan:

- Er r or Message: esta propiedad permite indicar el texto que se mostrar al
usuario en el control de validacin 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 validacin y que adems se aade junto con el
resto de mensajes de validacin al control Val i dat i onSummar y, si es que lo hay
en el WebForm. Si se desea que el mensaje de error slo aparezca en el control
de validacin que lo lanza, ha de indicarse el mensaje en la propiedad Text del
control de validacin, en lugar de en la propiedad Er r or Message.
- Cont r ol ToVal i dat e: esta propiedad indica el ID del control que se est
validando.
- Di spl ay: Si el valor de esta propiedad es None, el texto contenido en la
propiedad Er r or Message se muestra en el sumario (Val i dat i onSummar y), 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
Cont r ol ToVal i dat e permite indicar a que control se asocia. Si se incluye un control
Requi r edFi el dVal i dat or a una pgina Web ASP.NET sin asociarle un control al que
validar, al ejecutar la aplicacin se mostrar una pgina de error.
2/18 2

Figura 22.1. Pgina de error indicando que el control Requi r edFi el dVal i dat or no
est asociado a control alguno que validar.

Por ejemplo, supnga que se dispone de una aplicacin llamada
Ej empl oRequi r edFi el dVal i dat or en la que la primera pgina es una pgina de
control de usuario y clave.

3/18 3

Figura 22.2. Pgina de ejemplo sobre la que probar el control
Requi r edFi el dVal i dat or .

Se desea mostrar el mensaje Debe i nt r oduci r un nombr e de usuar i o, en caso de
que al pulsar el botn Envi ar la caja de texto correspondiente a la etiqueta Usuar i o no
haya sido rellenada.

El primer paso que se ha de dar es poner la propiedad CausesVal i dat i on del botn
Envi ar a t r ue. De este modo, cada vez que se pulse el botn Envi ar se provocar una
validacin.

El siguiente paso es aadir al formulario Web un control Requi r edFi el dVal i dat i on y
asociar su propiedad Cont r ol ToVal i dat e con la caja de texto Text Box1, que es en la
que se debe introducir el nombre de usuario. Adems, se debe indicar en la propiedad
Er r or Message -o bien en Text , si se desea que el mensaje de error slo aparezca en el
control de validacin- el mensaje que se desea mostrar si no se rellena la caja de texto
Text Box1.

4/18 4

Figura 22.3. Vista diseo de la pgina con el control Requi r edFi el dVal i dat or .

Si se observa el cdigo de WebFor m1. aspx. cs se ver que se ha aadido el control
Requi r edFi el dVal i dat or :

usi ng Syst em;
usi ng Syst em. Col l ect i ons;
usi ng Syst em. Component Model ;
usi ng Syst em. Dat a;
usi ng Syst em. Dr awi ng;
usi ng Syst em. Web;
usi ng Syst em. Web. Sessi onSt at e;
usi ng Syst em. Web. UI ;
usi ng Syst em. Web. UI . WebCont r ol s;
usi ng Syst em. Web. UI . Ht ml Cont r ol s;

namespace Ej empl oReqFi el dVal i dat or
{
/ / / <summar y>
/ / / Summar y descr i pt i on f or WebFor m1.
/ / / </ summar y>
publ i c cl ass WebFor m1 : Syst em. Web. UI . Page
{
pr ot ect ed Syst em. Web. UI . WebCont r ol s. Text Box Text Box1;
pr ot ect ed Syst em. Web. UI . WebCont r ol s. Text Box Text Box2;
pr ot ect ed Syst em. Web. UI . WebCont r ol s. Label Label 1;
pr ot ect ed Syst em. Web. UI . WebCont r ol s. Label Label 3;
protected System.Web.UI.WebControls.RequiredFieldValidator
RequiredFieldValidator1;
pr ot ect ed Syst em. Web. UI . WebCont r ol s. But t on But t on1;

5/18 5
. . .
. . .
En el cdigo HTML de la pgina WebFor m1. aspx se puede ver que tambin se ha
aadido el control de validacin y que se han indicado los valores de las propiedades
Cont r ol ToVal i dat e, Er r or Message, etc...

<%@ Page l anguage=" c#" Codebehi nd=" WebFor m1. aspx. cs"
Aut oEvent Wi r eup=" f al se" I nher i t s=" Ej empl oReqFi el dVal i dat or . WebFor m1"
%>

<asp: Text Box i d=" Text Box1" st yl e=" Z- I NDEX: 101; LEFT: 438px; POSI TI ON:
absol ut e; TOP: 92px" r unat =" ser ver " Wi dt h=" 144px" Hei ght =" 22px" >
</ asp: Text Box>
<asp: Label i d=" Label 1" st yl e=" Z- I NDEX: 103; LEFT: 302px; POSI TI ON:
absol ut e; TOP: 95px" r unat =" ser ver " Wi dt h=" 121px"
Hei ght =" 29px" >Usuar i o:
</ 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: But t on i d=" But t on1"
st yl e=" Z- I NDEX: 107; LEFT: 368px; POSI TI ON: absol ut e; TOP: 208px"
r unat =" ser ver " Wi dt h=" 169px" Hei ght =" 28px" Text =" Envi ar " >
</ asp: But t on>

</ f or m>
</ body>
</ HTML>

Al ejecutar la aplicacin no aparecer el control Requi r edFi el dVal i dat or 1. ste slo
se mostrar si se realiza una validacin en el servidor (tras pulsar el botn But t on1) y si
la caja de texto se ha dejado en blanco.

6/18 6

Figura 22.4. Resultado de pulsar el botn Envi ar sin rellenar el campo usuario. El
control Requi r edFi el dVal i dat or muestra el mensaje de error.

Esta es la validacin bsica. Es posible controlar en mayor grado la validacin
aprovechando la propiedad I sVal i d de la clase Page. Por ejemplo, podra hacerse que
la etiqueta Usuar i o: cambie su color a rojo mientras no se introduzca un nombre de
usuario. Un modo sencillo de implementarlo es utilizar el mtodo But t on1_Cl i ck:

pr i vat e voi d But t on1_Cl i ck( obj ect sender , Syst em. Event Ar gs e)
{

i f ( Page. I sVal i d == t r ue)
{
Label 1. For eCol or = Col or . Bl ack;
}
el se
{
Label 1. For eCol or = Col or . Red;
}
}

No obstante, si se ejecuta la aplicacin se puede ver que no hace lo esperado. El motivo
es que la propiedad Enabl eCl i ent Scr i pt del control Requi r edFi el dVal i dat or 1 est
a t r ue, lo que quiere decir que si el navegador lo permite, la validacin se har en el
cliente (con cdigo J Script) y todo cdigo puesto en el servidor no llegar a ejecutarse.
Si se cambia esta propiedad a f al se, la aplicacin funcionar segn lo esperado.

7/18 7
En caso de que no se introduzca valor alguno en la caja de texto del Usuario, la etiqueta
Usuar i o se pondr en rojo.

Figura 22.5. Personalizacin de la validacin realizada en el mtodo But t on1_Cl i ck.

La aplicacin mostrada ha sido realizada utilizando el entorno de diseo de Visual
Studio .NET. Por tal motivo, el cdigo de respuesta a la pulsacin del botn Envi ar
(But t on1) se ha generado por defecto en el fichero WebFor m1. aspx. cs, en concreto en
el mtodo But t on1_Cl i ck. No obstante, este cdigo poda haberse introducido
directamente en el fichero WebFor m1. aspx, como un script.

Es importante indicar que este script puede ser de servidor (r unat =ser ver ) o de cliente
(por defecto, si no se indica). En el caso de que sea de cliente slo puede codificarse en
VBScript o en J Script.

En el siguiente ejemplo se muestra como incluir el script en el fichero WebFor m1. aspx.

<%@ Page l anguage=" c#" Codebehi nd=" WebFor m1. aspx. cs"
Aut oEvent Wi r eup=" f al se" I nher i t s=" Ej empl oReqFi el dVal i dat or . WebFor m1"
%>

<ht ml >
<head>
<script language="C#" runat=server>
8/18 8

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 vaco";
}
}

</script>

</ head>
<body>

<asp: Text Box i d=" Text Box1" st yl e=" Z- I NDEX: 101; LEFT: 438px; POSI TI ON:
absol ut e; TOP: 92px" r unat =" ser ver " Wi dt h=" 144px" Hei ght =" 22px" >
</ asp: Text Box>
<asp: Label i d=" Label 1" st yl e=" Z- I NDEX: 103; LEFT: 302px; POSI TI ON:
absol ut e; TOP: 95px" r unat =" ser ver " Wi dt h=" 121px"
Hei ght =" 29px" >Usuar i o:
</ asp: Label >
<asp: Requi r edFi el dVal i dat or

i d=" Requi r edFi el dVal i dat or 1"
st yl e=" Z- I NDEX: 106; LEFT: 328px; POSI TI ON: absol ut e; TOP: 255px"
r unat =" ser ver " Wi dt h=" 272px" Hei ght =" 38px"
Er r or Message=" Debe I nt r oduci r el nombr e de Usuar i o"
Cont r ol ToVal i dat e=" Text Box1" >
</ asp: Requi r edFi el dVal i dat or >

<asp: Label i d=" Label Mensaj e"
<asp:Button id=Button1
text="Validar"
OnClick="BotonValidar_Click"
runat=server />

</ body>
</ ht ml >

CompareValidator.
Este control permite comparar el valor introducido por el usuario en el control a validar
(propiedad Cont r ol ToVal i dat e) con el valor introducido en otro control (propiedad
Cont r ol ToCompar e) con una constante (propiedad Val ueToCompar e).
No se deben utilizar a la vez (darles valor) las propiedades Cont r ol ToCompar e y
Val ueToCompar e.
9/18 9

Porr ejemplo:

<asp: Compar eVal i dat or i d=" Compar e1"
Cont r ol ToVal i dat e=" Text Box1"
Cont r ol ToCompar e=" Text Box2"
Type=" St r i ng"
r unat =" ser ver " / >

RangeValidator.
Este control permite verificar si el valor introducido en el control al que se le asocia
(propiedad Cont r ol ToVal i dat e) se encuentra entre un valor mnimo (propiedad
Mi ni mumVal ue) y un valor mximo (propiedad Maxi mumVal ue).

Suponga que se quiere mejorar la aplicacin Ej empl oReqFi el dVal i dat or aadiendo
un control RangeVal i dat or 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 aadirlo directamente en la vista de diseo y actualizar las
propiedades Cont r ol ToVal i dat e, Mi ni mumVal ue y Maxi munVal ue es suficiente.

El problema viene si se desea especializar el tratamiento que se da a la validacin del
valor de la clave con el control RangeVal i dat or (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 aplicacin Ej empl oReqFi el dVal i dat or , el
cdigo de validacin puede introducirse en el mtodo But t on1_Cl i ck( ) . No obstante,
el cdigo contenido en But t on1_Cl i ck( ) pone a rojo la etiqueta usuario si la pgina no
es vlida (propiedad Page. I sVal i d) 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 cundo
falla la validacin en Requi r edFi el dVal i dat or 1 y cundo en RangeVal i dat or 1.

La solucin consiste en invocar por separado al mtodo Val i dat e de cada uno de los
controles y preguntar por la propiedad I sVal i d de cada uno de los controles.

. . .
. . .

pr i vat e voi d I ni t i al i zeComponent ( )
{
t hi s. But t on1. Cl i ck += new Event Handl er ( t hi s. But t on1_Cl i ck) ;
t hi s. Cust omVal i dat or 1. Ser ver Val i dat e +=
new Syst em. Web. UI . WebCont r ol s. Ser ver Val i dat eEvent Handl er (
t hi s. Cust omVal i dat or 1_Ser ver Val i dat e) ;
t hi s. Load += new Syst em. Event Handl er ( t hi s. Page_Load) ;

}

pr i vat e voi d Page_I ni t ( obj ect sender , Event Ar gs e)
{
/ /
/ / CODEGEN: Thi s cal l i s r equi r ed by t he ASP. NET Web
/ / For mDesi gner .
10/18 10
/ /
I ni t i al i zeComponent ( ) ;
RangeValidator1.Type = ValidationDataType.Integer;
RangeValidator1.MinimumValue = "0";
RangeValidator1.MaximumValue = "99999";

}

. . .
. . .

{
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 aplicacin, si la clave no es correcta, slo se pondr en rojo la etiqueta
Cl ave.

11/18 11

Figura 22.6. Personalizacin de la validacin para los controles
Requi r edFi el dVal i dat or y RangeVal i dat or .
RegularExpresionValidator.
Este control verifica si el valor del control de entrada al que est asociado sigue una
determinada expresin regular. Este tipo de validacin es interesante para nmeros de
telfono, direcciones de e-mail, fechas...

La sintaxis de la expresin regular difiere en funcin de si la validacin se realiza en el
cliente o en el servidor. Si la validacin es en el servidor se utiliza
Syst em. Text . Regul ar Expr essi ons. RegEx para definir la expresin regular. Si la
validacin es en el cliente se utiliza J Script para la expresin regular.

Visual Studio ofrece un asistente de generacin de expresiones regulares al que se
puede acceder desde la ventana de propiedades al configurar el control de tipo
Regul ar Expr esi onVal i dat or (en concreto, desde la propiedad
Val i dat i onExpr esi n).

12/18 12

Figura 22.7. Utilizacin del cuadro de dilogo editor de expresiones regulares.

En el siguiente ejemplo se utiliza una expresin regular y el control
Regul ar Expr esi onVal i dat or para comprobar si el valor introducido en la caja de
texto Cl ave es un nmero de 5 dgitos.

La expresin regular es: ^\d{5}$

Tras configurar las propiedades del control Regul ar Expr esi onVal i dat or 1 desde la
ventana de propiedades se ha de aadir el cdigo de validacin en el mtodo
But t on1_Cl i ck( ) .

{

Requi r edFi el dVal i dat or 1. Val i dat e( ) ;

i f ( Requi r edFi el dVal i dat or 1. I sVal i d == t r ue)
{
}
el se
{
}

RangeVal i dat or 1. Val i dat e( ) ;

i f ( RangeVal i dat or 1. I sVal i d == t r ue)
13/18 13
{
}
el se
{
}

Regul ar Expr essi onVal i dat or 1. Val i dat e( ) ;

i f ( Regul ar Expr essi onVal i dat or 1. I sVal i d == t r ue)
{
}
el se
{
}
}

Al ejecutar la aplicacin, si se introduce una clave que no tenga 5 dgitos, el resultado es
el de la figura 22.8:

Figura 22.8. Personalizacin del tratamiento asociado al control
Regul ar Expr esi onVal i dat or .
CustomValidator.
14/18 14
Permite definir la validacin que se va a aplicar a un control. Para crear una funcin de
validacin se ha de programar un manejador para el evento Ser ver Val i dat e. Este
evento recibe un objeto Ser ver Val i dat eEvent Ar gs como parmetro. La propiedad
Val ue de este objeto contiene el st r i ng con el contenido del control a validar. El
resultado de la validacin se almacena en la propiedad I sVal i d del objeto
Ser ver Val i dat eEvent Ar gs (si es f al se o es puesto a f al se, se muestra el control
Cust omVal i dat or ).

Si se desea crear una funcin de validacin del lado del cliente se ha de introducir un
script con tal funcin en la pgina . aspx e indicarla en la propiedad
Cl i ent Val i dat i onFunct i on del control Cust omVal i dat or . Debido a que esta funcin
se va a ejecutar en el cliente, debe ser escrita en VBScript o en J Script.

Supnga que, en el ejemplo Ej ReqFi el dVal i dat or , se quiere controlar que si la
suscripcin 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
suscripcin.

El primer paso es aadir un control Cust omVal i dat or (Cust omVal i dat or 1) y dar los
siguientes valores a sus propiedades:
- Cont r ol ToVal i dat e = Text Box1
- Enabl eCl i ent Scr i pt = f al se
- Er r or Message = debe ust ed act ual i zar su subscr i pci n

Tras este paso se ha de codificar el mtodo Cust omVal i dat or 1_Ser ver Val i dat e, que
responde al evento Ser ver Val i dat e.

pr i vat e voi d Cust omVal i dat or 1_Ser ver Val i dat e( obj ect sour ce,
Syst em. Web. UI . WebCont r ol s. Ser ver Val i dat eEvent Ar gs ar gs)
{
i f ( ar gs. Val ue. Equal s( " Pepe" ) )
{
Cust omVal i dat or 1. Er r or Message = ar gs. Val ue + " , " +
Cust omVal i dat or 1. Er r or Message;
args.IsValid = false;
Text Box1. For eCol or = Col or . Red;
}
el se
{
Text Box1. For eCol or = Col or . Bl ack;
}
}

Es importante tener en cuenta que si se desea que el control Cust omVal i dat or 1
muestre su texto, ste tiene que detectar error en la validacin. El control
Cust omVal i dat or 1 considera que hay error si se pone la propiedad I sVal i d de ar gs a
f al se.

El resultado de ejecutar la aplicacin e introducir como nombre de usuario Pepe ser ver
el mensaje del control Cust omVal i dat or 1 y ver tambin el texto Pepe en rojo.

15/18 15

Figura 22.9. Utilizacin del control Cust omVal i dat or .

En este caso, la validacin ha sido de servidor. Si se desea que sea en el cliente es
necesario generar un script de cliente en la pgina . aspx y poner la propiedad
Enabl eCl i ent Scr i pt de Cust omVal i dat or 1 a t r ue. Adems se ha de indicar en la
propiedad Cl i ent Val i dat i onFunct i on de Cust omVal i dat or 1 el nombre de la
funcin del script de cliente.

La siguiente funcin se ha de introducir al final de WebFor m1. aspx y slo 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>

</ ht ml >

16/18 16
Como se puede observar, el lenguaje es VBScript y su sintaxis difiere de la de C#.
Cuando se crea un script de cliente lo lgico es desear que pueda ejecutarse en cuantos
ms navegadores sea posible. La mayora de los navegadores soportan J avaScript y
VBScript (J Script tambin tiene bastante soporte debido a su parecido con J avaScript).
Otros lenguajes, como puede ser C#, no son ampliamente soportados por los
navegadores, de modo que se recomienda utilizar J avaScript o VBScript para los scripts
de cliente.

Por defecto, el documento . aspx, cuando se crea con Visual Studio .NET, toma
J avaScript 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
pgina Web generada a partir de la pgina . aspx). La propiedad en la que se indica es
def aul t Cl i ent Scr i pt .

Figura 22.10. Vista HTML de la pgina. El lenguaje de script utilizado es J Script.

El lenguaje indicado en la propiedad def aul t Cl i ent Scr i pt es J Script, en cambio, en
la pgina . aspx se indica J avaScript. Realmente son muy parecidos (J avaScript es un
subconjunto de J ava, definido por Netscape y J Script es un subconjunto de J ava
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 def aul t Cl i ent Scr i pt a VBScript.

ValidationSummary.
17/18 17
Un control de esta clase permite hacer un sumario de todos los mensajes de error de
todos los controles de validacin de una pgina 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 Di spl ayMode).

La lista de puntos muestra todos los errores que se han detectado al validar la pgina por
los distintos controles de validacin pero se refresca en cada nueva validacin, es decir,
no acumula los errores de anteriores validaciones.

Dos propiedades interesantes de la clase Val i dat i onSummar y son ShowSummar y y
ShowMessageBox que permiten mostrar, respectivamente, el listado de mensajes en la
pgina Web o en un cuadro de mensaje.

Si se aade un control Val i dat i onSummar y a la pgina WebFor m1. aspx de la
aplicacin Ej empl oReqFi el dVal i dat or (est en la parte izquierda), el resultado es el
de la figura 22.11:

Figura 22.11. Utilizacin del control Val i dat i onSummar y.

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 pgina ASP.NET.

En muchos casos es posible crear un control ASP.NET a partir de una pgina ASP.NET
simplemente cambiado la extensin . aspx por . ascx y la extensin . aspx. cs por
18/18 18
. 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 validacin.

Si se desea construir un control ASP.NET puro, sin pgina web asociada, se puede
utilizar el asistente, eligiendo la opcin Librera de controles Web.

Figura 22.12. Cuadro de dilogo de creacin de un nuevo proyecto. Opcin de creacin
de un control a medida.

El resultado ser un control derivado de la clase
Syst em. Web. UI . WebCont r ol s. WebCont r ol o de una clase derivada de sta y estar
contenido en un fichero . ascx.

Controles ASPNET Validacion

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Controles ASPNET Validacion

Uploaded by

Copyright:

Available Formats

Marco Besteiro y Miguel Rodrguez Controles de Validacin

<asp: Requi r edFi el dVal i dat or

<asp: Label i d=" Label Mensaj e"

You might also like