javascript - Update ValidationSummary list on control blurs?

Question

A ValidationSummary will show a list of errors on postback. As each field is fixed, it's validator is fired, and any validation text will disappear. I want to automatically update the ValidationSummary as well.

The following works fine:

<asp:TextBox ID="ForenameTextBox" onblur="ValidationSummaryOnSubmit()" runat="server" />

but this isn't ideal, as it means changing and maintaining this on all fields. (ValidationSummaryOnSubmit is a Microsoft function.) So I tried to do it dynamically:

addEvent(window, "load", UpdateValidationSummary);

function addEvent(obj, evType, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evType, fn, true);
    } else {
        if (obj.attachEvent) {
            var r = obj.attachEvent("on" + evType, fn);
            return r;
        }
    }
}

function removeEvent(obj, evType, fn) {
    if (obj.removeEventListener) {
        obj.removeEventListener(evType, fn, true);
        return true;
    } else if (obj.detachEvent) {
        var r = obj.detachEvent("on" + evType, fn);
        return r;
    }
}

function UpdateValidationSummary() {
    if (typeof (Page_Validators) == "undefined") {
        return;
    }
    var i, val, ctrl;
    for (i = 0; i < Page_Validators.length; i++) {
        val = Page_Validators[i];
        if (val.controltovalidate != null && val.controltovalidate != "") {
            ctrl = document.getElementById(val.controltovalidate);
            if (ctrl != null && typeof (ValidationSummaryOnSubmit) == "function") {
                //add call to ValidationSummary on blur
                addEvent(ctrl, "blur", ValidationSummaryOnSubmit);
            }
        }
    }
}

This doesn't work though - the whole ValidationSummary disappears when one field is fixed, and the ValidationSummaryOnSubmit function seems to get called twice. If I use a simple assignment instead of the addEvent function it works, but I want to cater for fields that might already have something going on in the onBlur event.

Basically I think I just need to add a call to the ValidationSummaryOnSubmit function to the "list" of onBlur handlers for each control. Why doesn't the code above seem to do this?

Answer 1

Here's a server-side approach to get the onblur attribute on all TextBoxes (which should also work with Validation Groups):

• Create a class derived from TextBox, e.g., TextBoxEx
• Add the attribute in this derived class e.g., this.Attributes.Add("onblur", string.Format("ValidationSummaryOnSubmit('{0}')", this.ValidationGroup);
• Use tag mapping so that all of your existing <asp:TextBox> tags will still work: <system.web> <pages> <tagMapping> <add tagType="System.Web.UI.WebControls.TextBox" mappedTagType="MyControls.TextBoxEx"/> </tagMapping> </pages> </system.web>

Another way would be to use ControlAdapters to add the attribute.

Relevant links:
Understanding ASP.NET Validation
MSDN - tagMapping Element for pages