¿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>

 

Artículos relacionados
7 Comentarios
  • Agustin Comentar
    Wednesday, May 28, 2014

    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.

    • José I. Estrada HdzComentar
      Wednesday, May 28, 2014

      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

  • jumartos Comentar
    Friday, August 8, 2014

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

    • José EstradaComentar
      Tuesday, February 3, 2015

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

    • EmilioComentar
      Tuesday, February 3, 2015

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

    • EmilioComentar
      Tuesday, February 3, 2015

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

  • Strickland Comentar
    Friday, March 2, 2018

    Yes! Finally someone writes about togel 4d seoul.

  • Rumble Comentar
    Saturday, March 10, 2018

    H?ving ?ead this I tho?ght it w?s very informative. ? ?ppreciate you finding the t?me and effort t? p?t this informative article to?ether. I once again f?nd my?elf personally spending ?ay too mu?h time both reading ?nd leaving comments. But s? ?hat, it w?s st?ll worthwhile!

  • Trumper Comentar
    Saturday, April 7, 2018

    This page certainly has all of the information and facts I needed concerning this subject and didn't know who to ask.

  • Ellzey Comentar
    Sunday, April 8, 2018

    After looking into a number of the blog articles on your web page, I seriously appreciate your way of writing a blog. I book marked it to my bookmark webpage list and will be checking back soon. Please visit my website as well and tell me your opinion.

  • Petty Comentar
    Thursday, April 19, 2018

    That is ve?y attention-grabbing, Yo? ?re a very professional blogger. ?'ve joined y?ur feed and stay up f?r searching fo? extra of you? fantastic post. ?lso, I've shared y?ur website in my social networks

Enviame un comentario