Question

I have two questions regarding client-side validation in ASP, relating to the following setup:

I have this bit of javascript which applies error styles to form elements if they fail to validate:

        var val = Page_ClientValidate();

        if (!val) {
            var i = 0;
            for (; i < Page_Validators.length; i++) {
                if (!Page_Validators[i].isvalid) {
                    $("#" + Page_Validators[i].controltovalidate).parent().removeClass("valid").addClass("invalid");
                } else {
                    $("#" + Page_Validators[i].controltovalidate).parent().removeClass("invalid").addClass("valid");
                }
            }
        }

        return val;

The call to parent() is referencing an asp:Panel, which encompasses each individual form element and its validators. My problem is that, if I assign more than one validator to a control, and the first validator fails but the second passes, the ‘valid’ style is applied last due to order of operations. I have two questions regarding this. It’s important to note that I am extremely new to JavaScript, and have previously just been abusing postbacks to do all my validation.

Question #1:

Is there a good documentation source for client-side validation? I can’t seem to find anything. For example, where does this Page_ClientValidate() call come from? What other calls can I make? What about Page_Validators? What members exist in controltovalidate? Are there any? Is it just a DOM element? I know what I want to do in my head to solve this problem:

get parent

valid = true

for each validator in parent
    if validator does not validate
        valid = false
        break

if valid
    apply valid style
else
    apply invalid style

But I don’t even know how I can do this. So, again, is there any good documentation I can use to solve this problem myself?

Question #2:

Assuming I get a good answer to #1, I’ll figure this out myself but…

How do I do what I described in the pseudo-code above, or is it not possible in the manner I’ve laid out?

Answer 1

Question #1: MSDN is a great source of information on this, start here.

Question #2: Try this approach:

    var val = Page_ClientValidate();

    if (!val) {
        $(".invalid").removeClass("invalid"); //Remove invalids
        var i = 0;
        for (; i < Page_Validators.length; i++) {
            if (!Page_Validators[i].isvalid) {
                $("#" + Page_Validators[i].controltovalidate).parent().removeClass("valid").addClass("invalid");
            } else {
                $("#" + Page_Validators[i].controltovalidate).parent(":not(.invalid)").addClass("valid");
                //Only apply to those not already invalid
            }
        }
    }

    return val;