jQuery Validation – Creating ASP.NET Validation Groups with jQuery “not” and “ignore”.

Since jQuery offers great means to perform data validation in ASP.NET, there are still a couple of ASP.NET features that jQuery doesn’t know to handle by default: for which we just need to add some simple tweaks.

As we already seen that the issues of jQuery Validation –and jQuery generally- with the ASP.NET Ajax UpdatePanel have an workaround here, there’s still the very useful functionality of ASP.NET Validation Groups. Since ASP.NET allows only on HTML FORM element in page, the Validation Groups have been created to logically group distinct ASP.NET Validators. For the common jQuery Validation library this feature may seem useless, since generally HTML pages allow multiple FORM elements: each of the parameter input logical form consists of a distinct HTML FORM. Therefore, we need a way of emulating ASP.NET Validation Groups with jQuery, having a single HTML FORM.

Let’s consider the following ASP.NET mark-up that contains two logical parameter input forms: “#info” and “#address”:

<div id="info">
        <label>Username</label>
        <asp:TextBox ID="UsernameTextBox" runat="server" CssClass="required"></asp:TextBox>
        <br />
        <label>Email</label>
        <asp:TextBox ID="EmailTextBox" runat="server" CssClass="required email"></asp:TextBox>
        <br />
        <label>Name</label>
        <asp:TextBox ID="NameTextbox" runat="server"></asp:TextBox><br />
        <asp:Button ID="SubmitButton" runat="server" OnClick="SubmitButton_Click" Text="Submit info" CssClass="submitInfo" />
</div>

<div id="address">
        <label>Address</label>
        <asp:TextBox ID="AddressTextBox" runat="server" CssClass="required"></asp:TextBox><br />
        <asp:Button ID="SubmitAddressButton" runat="server" OnClick="SubmitButton_Click" Text="Submit address" CssClass="submitAddress" />
</div>

This would be the regular jQuery form validation setup:

$(document).ready(function() {

    //registering the common jQuery FORM Validation
    formValidation = $("form").validate({
        submitHandler: function(form) {
            form.submit();
        }
    });
…

We’re going further to consider these two (#info and #address) as our distinct validation groups. The main idea of separating validation groups is to inform jQuery Validation that it should just ignore any input elements outside the active group. For this, we’re going to use the jQuery validate() ignore option and the jQuery not selector, by “telling” dynamically the validation object to ignore all the input elements outside the active logical form.

In ASP.NET, the ValidationGroup property had to be setup on each of the ASP.NET Validator controls and again on the Button that triggered the postback. Using this approach we just need to setup the postback buttons with the proper validation group, by handling the Button click event where to setup the validation right ignore option. jQuery not selector is used to differentiate between DOM elements.
…
//Similar to ASP.NET, setup of the Button right ValidationGroup "info",
//by ignoring any input element that is not in the #info div.
$(".submitInfo").click(function(item) {
    formValidation.settings.ignore = "div:not(#info) > *";
});

//Similar to ASP.NET, setup of the Button right ValidationGroup "address",
//by ignoring any input element that is not in the #address div.
$(".submitAddress").click(function(item) {
    formValidation.settings.ignore = "div:not(#address) > *";
});

//…ending the $(document).ready()

…});

That’s it!