¿Cómo especificar grupos de validación con jQuery y ASP.NET?4151

¿Cómo especificar grupos de validación con jQuery y ASP.NET?

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:

  1. Primero tenemos que agregar los script de jQuery:
  2. Mediante JavaScript mandamos llamar la función que valida los campos.
  3. 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>

 

Compartir

Comentarios (7)

  • Agustin Responder

    Hola! Muy buen aporte! me sirvio! mi consulta es, que pasa si se da que uno de mis fieldset esta dentro del otro? tengo un formulario que valida los campos requerido al darle enviar, hasta ahi tengo un solo fieldset, pero en mi caso, dentro de ese formulario hay una grilla que se completa de forma independiente, me quedaria un fieldset dentro del otro.

    Wednesday, May 28, 2014 7:52 AM
    • José I. Estrada Hdz Responder

      Hola Agustín, En teoría no habría ningún problema por lo siguiente: 1. Tu asocias el ID del fieldset con el botón que validara el envío, en este caso en la propiedad class o cssclass. 2. El jQuery busca a los fieldset que tengan en la propiedad class=form. En el ejemplo yo los ligue de la siguiente manera: fieldset class="form" id="signup" Button ID="uxRegister" runat="server" Text="Registrarme" CssClass="submit signup" El fieldset interno solo revisa que la class no sea form y listo. Me cuentas Saludos

      5/28/2014 10:06:27 AM
  • jumartos Responder

    como hago para cambiar la propiedad visible a un control asp utilizadno jquery. (uso asp. net vb 2013)

    Friday, August 8, 2014 4:38 PM
    • José Estrada Responder

      Lo puedes hacer con una clase css, algo así: $("#newsletterError").removeClass('hidden'); $("#newsletterSuccess").addClass('hidden');

      2/3/2015 12:37:16 PM
    • Emilio Responder

      PUedes probar esta instrucción tambien $("#NombreControl").hide();

      2/3/2015 12:40:57 PM
    • Emilio Responder

      PUedes probar esta instrucción tambien $("#NombreControl").hide();

      2/3/2015 12:44:53 PM
  • Lutes Responder

    A motivating discussion is definitely worth comment. I do think that you ought to write more about this topic, it may not be a taboo subject but usually folks don't talk about these subjects. To the next! Cheers!!

    Monday, June 12, 2017 7:42 PM

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com