Los grupos de validación permiten organizar los controles de validación de una página como un conjunto. Cada grupo de validación puede realizar la validación independientemente de otros grupos de validación de la página.
ASP.NET es muy fácil hacer esto solo hay que establecer la propiedad ValidationGroup en el mismo nombre (una cadena) para todos los controles que se desea agrupar. Puede asignar cualquier nombre a un grupo de validación, pero debe utilizar el mismo nombre para todos los miembros del grupo. Si quieres más información de cómo hacer esto, lo puedes ver en http://msdn.microsoft.com/es-es/library/ms227424%28v=vs.100%29.aspx, en el caso de este artículo veremos cómo hacer este mismo pero con jQuery.
En un artículo anterior publique ¿Cómo validar campos en ASP.NET con jQuery?, pero ese ejemplo tiene una limitante que si tiene dos grupos de campos que se validan con dos botones independiente, cada vez que se haga clic en cualquier botón se validara toda la página y no solo los campos que se quieren validar.
Para entender mejor este problema veremos el siguiente ejemplo: Contamos con dos grupos de campos.
- Uno donde se puede registrar a un boletín de noticias y con su respectivo botón.
- Otro grupo donde puede entrar a su cuenta y con su respectivo botón
Expliquemos un poco el código:
- Primero tenemos que agregar los script de jQuery:
- Mediante JavaScript mandamos llamar la función que valida los campos.
- El primer grupo de controles que se valida “Regístrese al boletín de noticias”. El grupo de campos que se validara y el botón que enviara los datos al servidor debe ir dentro de un fieldset con la propiedad class=”form” y asignarle un nombre, para cada campo de texto que se validara, la propiedad CssClass se le debe asignar required, con esto se le dice que es requerido y en este caso es un correo electrónico para lo cual se le debe asignar email. Tambien en el botón “Registrarme” la propiedad CssClass se le debe asignar submit y además el nombre que se le asignó al fieldset, en este caso es signup. El ejemplo completo lo puedes descargar de la siguiente liga https://github.com/jiestrada/ValidationGroupjQuery .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Multiple Form Validation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery.validation.net.webforms.min.js"></script>
<script type="text/javascript">
$(function() {
$("#aspForm").validateWebForm();
});
</script>
<style type="text/css">
.error {
color: red;
}
</style>
</head>
<body>
<form id="aspForm" runat="server">
<fieldset class="form" id="signup">
<div class="something">
<ul></ul>
</div>
<legend>Regístrese al boletín de noticias</legend>
<p>
<asp:Label ID="uiFirstName" runat="server" AssociatedControlID="uxFirstName" Text="Correo Electrónico:"></asp:Label>
<asp:TextBox ID="uxFirstName" runat="server" CssClass="required email"></asp:TextBox>
</p>
<p>
<asp:Button ID="uxRegister" runat="server" Text="Registrarme" CssClass="submit signup" />
<asp:Button ID="uxCancelRegister" runat="server" Text="Cancelar" />
</p>
</fieldset>
<fieldset class="form" id="login">
<legend>Entrar a su cuenta</legend>
<p>
<asp:Label ID="uiUserName" runat="server" AssociatedControlID="uxUserName" Text="Correo Electrónico:"></asp:Label>
<asp:TextBox ID="uxUserName" runat="server" CssClass="required email"></asp:TextBox>
</p>
<p>
<asp:Label ID="Label1" runat="server" AssociatedControlID="uxPassword" Text="Contraseña:"></asp:Label>
<asp:TextBox ID="uxPassword" runat="server" CssClass="required" TextMode="Password"></asp:TextBox>
</p>
<p>
<asp:Button ID="uxLogin" runat="server" Text="Entrar" CssClass="submit login" />
<asp:Button ID="uxCancelSignUp" runat="server" Text="Cancelar" />
</p>
</fieldset>
</form>
</body>
</html>
