+Tenemos un formulario para el ingreso de información
+Todos los campos tienen controles de validación, osea… si no se ingresa alguna información… no se podrá enviar el formulario (vamos a suponer que javascript está habilitado).
+Pero a veces ocurre que, damos la opción de no ingresar algún dato… osea: Si no quieres ingresar la información esconde el control… poniéndole el check al checkbox escondemos el dropdownlist (vean la imagen),
Y obviamente no vamos a esconder el control desde el lado del servidor, osea haciendo un postback… no es necesario (eso es malo para la salud ;))… con un minímo de javascript ya está.
El problema es que si usamos javascript para ocultar el/los controles, las validaciones de esos controles que pretendemos esconder seguirán exigiendo el dato …
hagan la prueba, escondan algún control que está amarrado a un control de validación y verán que la validación sigue siendo solicitada.
Entonces, lo que tenemos que hacer es desactivar los controles de validación (también desde javascript) y asunto solucionado.
Vamos a hacer un ejemplito para demostrar esto:
Este es el código aspx + html + javascript:
<head runat="server">
<title>xxx</title>
<style type="text/css">
*
{
font-family: Trebuchet MS;
margin: 5px;
}
table
{
width: 40%;
border: dotted 1px green;
background-color: burlywood;
}
</style>
<script type="text/javascript">
function HideControls()
{
var chkLater = document.getElementById("<%=chkLater.ClientID %>");
var divUserType = document.getElementById("divUserType");
var rfvUserType = document.getElementById('<%= rfvUserType.ClientID %>');
if(chkLater.checked==true)
{
divUserType.style.display = "none";
ValidatorEnable(rfvUserType, false);
}
else
{
divUserType.style.display = "block";
ValidatorEnable(rfvUserType, true);
rfvUserType.isvalid = true;
ValidatorUpdateDisplay(rfvUserType);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tbody>
<tr>
<th colspan="2" style="background-color: brown">
Creación de Nuevo Usuario</th>
</tr>
<tr>
<td style="width: 15%">
Usuario:
</td>
<td>
<asp:TextBox ID="txtUser" Width="80%" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvUser" runat="server"
ErrorMessage="*" ControlToValidate="txtUser" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td style="width: 15%; white-space: nowrap">
Email:
</td>
<td>
<asp:TextBox ID="txtEmail" Width="80%" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmail" runat="server"
ErrorMessage="*" ControlToValidate="txtEmail" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td style="width: 15%; white-space: nowrap">
Contraseña:
</td>
<td>
<asp:TextBox ID="txtPassword" Width="80%" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvPassword" runat="server"
ErrorMessage="*" ControlToValidate="txtPassword" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td style="width: 15%; white-space: nowrap">
</td>
<td>
</td>
</tr>
<tr>
<td style="width: 15%; white-space: nowrap; vertical-align: top">
Tipo:
</td>
<td>
<div id="divUserType">
<asp:DropDownList ID="ddlUserType" Width="80%" runat="server">
<asp:ListItem Value="0" Text="(Seleccione un item)"></asp:ListItem>
<asp:ListItem Value="1" Text="Usuario Premium"></asp:ListItem>
<asp:ListItem Value="2" Text="Usuario Limitado"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvUserType" runat="server"
ErrorMessage="*" ControlToValidate="ddlUserType" Display="Dynamic"
InitialValue="0"></asp:RequiredFieldValidator>
</div>
<asp:CheckBox ID="chkLater" Text="Después decidiré." runat="server" />
</td>
</tr>
<tr>
<td style="width: 15%; white-space: nowrap">
</td>
<td>
<div style="width: 85%; text-align: right">
<asp:Button ID="btnSave" runat="server" Text="Guardar datos" />
</div>
</td>
</tr>
</tbody>
</table>
</form>
</body>
Eso es todo… o casi todo… lo único que me falta es amarrar el evento onclick al checkbox:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If IsPostBack Then Return
chkLater.Attributes.Add("onclick", "HideControls()")
End Sub
Para resumir:
La parte que hace todo el trabajo es el código javascript.
Espero que les sea de utilidad ;)
No hay comentarios.:
Publicar un comentario