Which controls triggered the Page.IsValid = false?

Question

Two things:

A) Is it possible to set the Page.IsValid (Is_Valid) property through Jquery so that I dont have to use the aspx validators? It is my understanding that the IsValid property is read-only?

B) When the validators are in, is it possible to find out, through Jquery (ofcourse) which controls caused the validation to fail? An example would be a form with loads of text boxes: user clicks the button and I get my results in a validation summary. All fine and dandy. But I also want to let the users know which controls they are by changing the respective textbox background to lets say, red.

Now the hack for that would be that I call my own JS function that checks all the textboxes for validation (again) and then change the css to invalid ones to show red. But I would have thought there surely must be a way to identity which controls failed the validation?

Any insight?

Answer 1

All validation controls do server validation for sure. Overriding isvalid=false from client side can only prevent postback to happen. At serverside and client side you can enumerate through collection of validators and each ctrl have IsValid property.

Answer 2

(A) is not possible. Page.IsValid is set by server-side validation and the client should not mess with it. Client-side validation doesn't post back if it fails anyway, so Page.Validate() isn't even called in that case.

The AJAX Control Toolkit achieves (B) by rebinding the validation functions. You can try something like the following:

[Disclaimer: I'm not as familiar with jQuery (yet), so I'll use plain JS. Feel free to translate to the appropriate jQuery idioms.]

for (var i = 0; i < window.Page_Validators.length; ++i) {
    var validator = window.Page_Validators[i];
    validator.__old_evaluationfunction = validator.evaluationfunction;
    validator.evaluationfunction = function(value) {
        var element = validator.controltovalidate;
        if (!validator.__old_evaluationfunction(value)) {
            // Validation failed - turn `element` red, scream at the user, etc.
            return false;
        } else {
            // Validation succeeded - restore `element` to its normal state.
            return true;
        }
    };
}