Validación de datos en AJAX con controles extendidos
1. Concepto
Hace unos meses un amigo me pidió hace el típico formulario de validación de datos
con efectos similares al de una aplicación en Flash con ActionScript.
2. Controles con Ajax
Para simular el efecto utilizo una combinación de los controles ValidatorCallout
y TextBoxWatermark.
como se puede ver
en este ejemplo.
Antes de explicar el código veamos como han ido evolucionando los formularios de
validación.
3. El inicio de la validación
Los primeros formularios que tuve que programar fueron en código HTML con una función
de validación en JavaScript puro.
Hagamos un viaje en el tiempo y recordemos su funcionamiento
en este formulario de validación
Las funciones de validación de datos vacíos, nulos, formatos validos se realizaba
desde funciones a medida creadas en JavaScript.
En este caso se pueden tener varios formularios en una misma página y controlar
manualmente la validación, el método get o post utilizado y la página de destino
del formulario.
Se debía controlar con mayor cuidado la validación de datos del lado del servidor
por los peligros de la inyección de código.
Veamos el código:
Plegar
1 <script language="javascript">
2 <!--
3
function EsVacio(cadena){
4
for (contador=0;contador<cadena.length;contador++)
{
5
if (cadena.substring(contador,contador+1)!=" ") {
6
return
false;
7
}
8
}
9
return true;
10 }
11
12 function EsEmailValido(email) {
13
//Rutina para validar email.
14
return true;
15 }
16
17 function validardatos() {
18
var Texto="";
19
var Valuefocus=true;
//Bandera para posicionar el foco en
caso de error
20
21
if (EsVacio(document.forms["myform"].email.value))
{
22
if (Valuefocus) {
23
document.forms["myform"].email.focus();
24
Valuefocus=false;
25
}
26
Texto=Texto+"- E-Mail\n";
27
}
28
29
if (Texto!="")
{
30
Texto="Debe completar los siguientes datos:\n"+Texto;
31
alert (Texto);
32
} else {
33
if (EsEmailValido(document.forms["myform"].email.value)) {
34
document.forms["myform"].enviar.value="Procesando...";
35
document.forms["myform"].action="guardar.asp";
36
document.forms["myform"].submit();
37
} else {
38
if (Valuefocus) {
39
document.forms["myform"].email.focus();
40
Valuefocus=false;
41
}
42
alert("La dirección de
e-mail es incorrecta");
43
}
44
}
45
46 }
47 //-->
48 </script>
49
50 <form id="myform"
method="post">
51 <table>
52
<tr>
53
<td>E-Mail:</td>
54
<td><input
name="email"
type="text" size="20"
maxlength="100"
/></td>
55
</tr>
56
<tr>
57
<td
colspan="2" align="center">
58
<input
type="button"
name="enviar"
value="Enviar"
onclick="validardatos();"/>
59
</td>
60
</tr>
61 </table>
62 </form>
4. Llega ASP.NET
Con los controles de validación de .NET se pudo reemplazar este modelo de programación
"artesanal" pudiendo crear el mismo efecto de ventana alert de JavaScript o creando
código en DHTML mostrando los típicos mensajes de error en color rojo.
Las validaciones con el control RequiredFieldValidator para validar expresiones
regulares para campos con un formato específico, el control RequiredFieldValidator
para valores requeridos y el mayor control en la inyección de código mejoraron notablemente
los desarrollos.
El foco se posiciona con la propiedad
SetFocusOnError="true",el texto del mensaje con
ErrorMessage="(*)
Indicar e-mail" e indico que los controles de validación
no muestren mensajes un mensaje con propiedad
Display="Dynamic".
Si queremos mostrar un
mensaje de alert con el modelo del comando alert de JavaScript debemos poner la
propiedad
Display="None"
y agregar un control ValidatorSummary.
En este ejemplo de formulario de validación se ve como se validan datos con controles de validación de ASP.NET.
El código es el siguiente:
Plegar
1 <table align="center">
2 <tr>
3 <td>E-mail:</td>
4 </tr>
5 <tr>
6 <td>
7 <asp:TextBox ID="email"
8 runat="server"
9 MaxLength="255"
10 Columns="50"></asp:TextBox>
11
12 <asp:RequiredFieldValidator ID="RFV_Email"
13 runat="server"
14 ControlToValidate="email"
15 SetFocusOnError="true"
16 ErrorMessage="(*) Indicar e-mail"
17 Display="Dynamic"></asp:RequiredFieldValidator>
18
19 <asp:RegularExpressionValidator ID="REV_Email"
20 runat="server"
21 ControlToValidate="email"
22 ErrorMessage="(*) El e-mail no es una dirección válida"
23 SetFocusOnError="true"
24 Display="Dynamic"
25 ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
26 </td>
27 </tr>
28 <tr>
29 <td align="center" colspan="2">
30 <asp:Button ID="BtEnviar"
31 runat="server"
32 CausesValidation="True"
33 Text="Enviar" />
34 <br />
35 <asp:ValidationSummary ID="VSummary"
36 visible="false"
37 runat="server"
38 DisplayMode="BulletList"
39 ShowMessageBox="false"
40 HeaderText="Debes completar los siguientes campos:"
41 ShowSummary="true" />
42 </td>
43 </tr>
44 <tr>
45 <td align="center" colspan="2">
46 <asp:Label runat="server" ID="lblResultado"></asp:Label>
47 </td>
48 </tr>
49 </table>
5. Código con AJAX
Como mostramos
en el formulario inicial con el control ValidatorCallout extiendo las propiedades
de los controles de validación mostrando una simpática capa de validación.
Primero se crea validador en forma normal como se utilizó en el punto 2 y luego
se agrega el control ValidatorCalloutExtender con la propiedad
TargetControlID referenciando
al control de validación.
El estilo de la capa, el icono del mensaje de alerta y la imagen del aspa
para cerrar el control son configurables con las propiedades:
HighlightCssClass ,
WarningIconImageUrl
y
CloseImageUrl. respectaivment.e
El control TextBoxWatermark complementa la visualización del control TextBox. Cuando
el control está vacio se muestra un mensaje con un estilo definido por la propiedad
WatermarkCssClass.
Cuando el usuario escribe algún texto el mensaje desaparece.
Plegar
1 <table align="center">
2
<tr>
3
<td>E-mail:</td>
4
</tr>
5
<tr>
6
<td>
7
<asp:TextBox
ID="email"
8
runat="server"
9
MaxLength="255"
10
Columns="50"></asp:TextBox>
11
12
<ajaxToolkit:ValidatorCalloutExtender
13
runat="Server"
14
ID="VCE_email_1"
15
TargetControlID="RFV_Email"
16
Width="250px"
17
HighlightCssClass="highlight"
18
WarningIconImageUrl="http://www.gestion-personal.com/_files/_images/general/warning.gif"
19
CloseImageUrl="http://www.gestion-personal.com/_files/_images/general/close.gif"
/>
20
21
<ajaxToolkit:ValidatorCalloutExtender
22
runat="Server"
23
ID="VCE_email_2"
24
TargetControlID="REV_Email"
25
Width="250px"
26
HighlightCssClass="highlight"
27
WarningIconImageUrl="http://www.gestion-personal.com/_files/_images/general/warning.gif"
28
CloseImageUrl="http://www.gestion-personal.com/_files/_images/general/close.gif"
/>
29
30
<ajaxToolkit:TextBoxWatermarkExtender
ID="TBWE_email"
31
runat="server"
32
TargetControlID="email"
33
WatermarkText="Indicar e-mail"
34
WatermarkCssClass="watermarked" />
35
36
<asp:RequiredFieldValidator
ID="RFV_Email"
37
runat="server"
38
ControlToValidate="email"
39
SetFocusOnError="true"
40
ErrorMessage="El campo E-mail es obligatorio"
41
Display="None"></asp:RequiredFieldValidator>
42
43
<asp:RegularExpressionValidator
ID="REV_Email"
44
runat="server"
45
ControlToValidate="email"
46
ErrorMessage="El e-mail no es una dirección válida"
47
SetFocusOnError="true"
48
Display="None"
49
ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
50
51
</td>
52
</tr>
53
<tr>
54
<td
align="center"
colspan="2">
55
<asp:Button
ID="BtEnviar" runat="server" CausesValidation="True" Text="Enviar"/>
56
</td>
57
</tr>
58 </table>
6. Instalación
Para codificación de estos controles se debe crear una referencia a la DLL
AjaxControlToolkit.dll en el proyecto
utilizado.
Y posteriormente registrar el assembly con el siguiente código de cabecera.
<%@
Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
7. Links
Más ejemplo de controles de validación
AjaxControlToolKit