jQuery Validation - Multiple submit buttons on one asp.net form, different validation groups?

Question

I have an asp.net form with a login section and a register section. There are two submit buttons that correspond to the appropriate section, login or register. I am using

Answer 1

Make the ASP.NET server validation logic available to client-side/jQuery by affixing special CSS class names onto the HTML elements representing server-side validation controls.

The CSS class names generated will represent validation groups. Therefore ,for example, some text boxes will be tagged with the class name for one validation group, and other text boxes for a different validation group.

For example, write and call this C# function in the Page PreRender handler, or before the page is rendered to imbue server controls with special CSS.

/// 

/// Makes the server validation logic knowledge available to the client side
/// by appending css class names to validators and html elements being validated.
/// The generated css classes can be targeted by jQuery in the DOM.
/// 
/// prefix string for validator css names
/// prefix string for target element css names
/// 
/// The css prefix arguments to this function help distinguish between what is a 
/// validation control and what is an html element being targeted by said validation control.
/// 
/// 
void TagValidationWithCss(string cssPrefixValidator, string cssPrefixTarget) {

    List valClasses = new List();
    List targetClasses = new List();

    // iterate over validator server controls
    foreach (BaseValidator val in Page.Validators) {

        // keep a unique list of generated validator css class names
        string classnameVal = cssPrefixValidator + val.ValidationGroup;
        if (!valClasses.Contains(classnameVal))
            valClasses.Add(classnameVal);
        // ..and mark the validator element with the generated css class name
        val.CssClass += (string.IsNullOrEmpty(val.CssClass) ? "" : " ") + classnameVal;

        // keep a unique list of generated target element css class names
        string classnameTarg = cssPrefixTarget + val.ValidationGroup;
        if (!targetClasses.Contains(classnameTarg))
            targetClasses.Add(classnameTarg);
        // ..and mark the target element with the generated css class name
        Control target = FindControl(val.ControlToValidate);
        if (target is HtmlControl)
            ((HtmlControl)target).Attributes["class"] += (string.IsNullOrEmpty(val.CssClass) ? "" : " ") + classnameTarg;
        else if (target is WebControl)
            ((WebControl)target).CssClass += (string.IsNullOrEmpty(val.CssClass) ? "" : " ") + classnameTarg;
    }

    // output client script having array of validator css names representing validation groups
    string jscriptVal = string.Format("", string.Join("','", valClasses.ToArray()), cssPrefixValidator);
    ClientScript.RegisterStartupScript(this.GetType(), "val", jscriptVal);

    //output client script having array of html element class names representing validation groups
    string jscriptTarg = string.Format("", string.Join("','", targetClasses.ToArray()), cssPrefixTarget);
    ClientScript.RegisterStartupScript(this.GetType(), "targ", jscriptTarg);
}

The function is called in the server-side Page:

protected override void OnPreRender(EventArgs e) {
    base.OnPreRender(e);

    TagValidationWithCss("validator-", "target-");
}

The declarative syntax of the ASPX page might have your two sections like so:

Login Section
    
    
    

    


Registration Section
    

---

Now over to the rendered page to see the results .....

The page HTML source contains arrays of generated CSS names representing validation groups, one set for validators (validator-) and another for targets of validation (target-)

These CSS names are also rendered on the html elements. Notice "target-vg1" CSS classes on text boxes here, representing validation group #1. The text boxes represent the login screen/interface on the page (one of two UI parts):

This second set of textboxes is on the same ASP.NET page (in the same ASP.NET Form) and represent the user Registration screen/interface (the second UI part). Notice these textboxes are tagged with a different validation group named "target-vg2" through the css class.

So we injected special Css names into the ASP.NET flow without interrupting or breaking it.

Ultimately this specialized output allows you to write custom scripts against it (i.e. using jQuery) to grab onto those special CSS class names and to distinguish between validation groups on the client side.

This simple example alerts the names of the validation groups on the client side to prove they are seen and known. Whew!

jQuery can be used to target the special css classes too.

This doesn't cover all cases. It might be really out to lunch, but was interesting to make. The server- and client-side code would need to be tweaked to personal or project taste.

(You also want to rely on the fact that newer browsers can apply multiple CSS classes to one element using the 'class' attribute by separating class names with spaces e.g - class="vg1 animated bright myclass your class". This allows the generated css class names to be appended after existing class names without overwriting them.)