ValidatorCalloutExtender with CustomValidator causes an error if the httpRuntime setting is equal to 4.5

We have set the following for all pages based on suggestions given in another reported issue so that things work well with jQuery: Page.UnobtrusiveValidationMode = UnobtrusiveValidationMode.WebForms;

I’m getting the following error when pairing a ValidatorCalloutExtender with a CustomValidator: Uncaught Sys.ArgumentUndefinedException: Sys.ArgumentUndefinedException: Value cannot be undefined. Parameter name: id

Upon further tracing through the JavaScript I’ve found that the following line (112) in ValidatorCallout.js is producing the error: var elementToValidate = this._elementToValidate = $get(elt.controltovalidate);

The problem is that the elt object has all of the expected properties prefixed with data-val- like so: <span id="ctl00_Main_customVal" style="display: none;" data-val-evaluationfunction="CustomValidatorEvaluateIsValid" data-val="true" data-val-display="None" data-val-errormessage="A valid member number must be entered" data-val-controltovalidate="ctl00_Main_textboxStudent" data-val-isvalid="False"></span>

Changing the line to this seems to partially solve the issue: var elementToValidate = this._elementToValidate = $get(elt.controltovalidate != null ? elt.controltovalidate : elt.getAttribute('data-val-controltovalidate'));

And the callout is shown to the user, but shows the wrong message and some events aren’t properly handled. This is because the rest of the properties that define what the callout will be like are not being retrieved/used since they’re all prefixed with data-val. For the moment I’ve been able to work around the issue with this hack in our code:

    $(function () {
        var calloutPrototype = Sys.Extended.UI.ValidatorCalloutBehavior.prototype;
        if (calloutPrototype != null) {
            calloutPrototype.get_element2 = calloutPrototype.get_element;
            calloutPrototype.get_element = function () {
                var elt = this.get_element2();
                var $valctrl = $(elt);
                elt.validateemptytext = $valctrl.data('val-validateemptytext');
                elt.clientvalidationfunction = eval($valctrl.data('val-clientvalidationfunction'));
                elt.evaluationfunction = eval($valctrl.data('val-evaluationfunction'));
                elt.val = $valctrl.data('val');
                elt.display = $valctrl.data('val-display');
                elt.errormessage = $valctrl.data('val-errormessage');
                elt.controltovalidate = $valctrl.data('val-controltovalidate');
                return elt;
            };
        }
    });

[DavidIQ]

I’m attaching this sample application that illustrates the problem. TestWebApp.zip

[MikhailTymchukDX]

Based on the previous experience in CodePlex, it’s about several months per release.