Thank you for the reply.  It looks like the issue is actually when I override .NET's ValidatorupdateDisplay function.  When an input mask field has an error I'd like to apply a CSS class to the control that threw the error to highlight the error for the user.  I do this with the code below.  This works perfect for intrinsic .NET controls.  This is a pretty standard way of applying CSS classes on error when using ASP .NET validation.  

The error occurs on any reference to val.controltovalidate.  Even through the control name is wmeZipCode, if you debug on references to val.controltovalidate you'll see that it's trying to reference the control as "wmeZipCode:v:".

Any ideas?

$(document).ready(function () {

//Extend the .NET ValidatorUpdateDisplay function to apply CSS classes on error.
$(function () {
if (typeof ValidatorUpdateDisplay != 'undefined') {
var originalValidatorUpdateDisplay = ValidatorUpdateDisplay;

ValidatorUpdateDisplay = function (val) {
if (!val.isvalid) {
$("#" + val.controltovalidate).addClass("validationError");
}
else {
$("#" + val.controltovalidate).removeClass("validationError");
}

originalValidatorUpdateDisplay(val);
}
}
});

});

Hello Kristopher,

it is very strange that it appends ":v:" to the end of the string. This happens in the original ValidatorUpdateDisplay  function even if you do not extend it.

Anyway, I have some suggestions that will make this work:

1) You do not need jQuery to get the WebMaskEditor value:

$('#<%=wmeZipCode.ClientID %>').val());

You can use the WebMaskEditor object model and its get_value() method, which is recommended:

e.IsValid = pattern.test($find('<%=wmeZipCode.ClientID %>').get_value());

2) Again, you do not need jQuery to find the WebMaskEditor element and assign class to it. I suggest you use get_element() method of the WebMaskEditor object model and use pure javascript to add class:

if (!val.isvalid) {
                        $find('wmeZipCode').get_element().className = $find('wmeZipCode').get_element().className + " validationError";
                    }
                    else {
                        $find('wmeZipCode').get_element().className = $find('wmeZipCode').get_element().className.replace(" validationError", "");
                    }

Please try these suggestions and let me know if you need any further assistance, I will be glad to help.

Very strange behavior indeed.  Because this happens in the original ValidatorUpdateDisplay it sounds like a bug in the Infragistics controls to me.

Thank you for your feedback.  Option 1 doesn't work as getting the value of the control wasn't my issue, getting the "controltovalidate" attribute of the validation control was my issue.

Option 2 doesn't work as I need a dynamic way to get the control with an error and apply a css class to it. I want to do this with all controls. I don't want to have to write a custom validator for every single control I'm validating and apply the css class to each control individually.  By extending the ValidatorUpdateDisplay I can do this for all controls saving me tons of code.  Your option means I'd have to write javascript for every validation control.  However, the problem then comes full circle and we're back to Infragistics controls not returning the proper control name with referring to them from .NETs validation library via the val.controltovalidate selector.

I'm able to bypass the problem with the code below, however I still think this is a bug.  Note that I had to add a check for "undefined" in case you were using a custom validator which doesn't require a "ControlToValidate".

$(document).ready(function () {

//Extend the .NET ValidatorUpdateDisplay function to apply CSS classes on error.
$(function () {
if (typeof ValidatorUpdateDisplay != "undefined") {
var originalValidatorUpdateDisplay = ValidatorUpdateDisplay;

ValidatorUpdateDisplay = function (val) {
if (typeof val.controltovalidate != "undefined") {
if (!val.isvalid) {
$("#" + val.controltovalidate.replace(":v:", "")).addClass("validationError");
}
else {
$("#" + val.controltovalidate.replace(":v:", "")).removeClass("validationError");
}
}

originalValidatorUpdateDisplay(val);
}
}
});
});

Hello Christopher,

You're quite right that it is excessive to write a custom validator for each control, but this is not what I meant. I totally agree with your code and suggest that instead of jQuery you can use the following:

$find(val.controltovalidate.replace(":v:", "")).).get_element().className = $find('wmeZipCode').get_element().className + " validationError";

I will further investigate this issue to confirm if it is caused by Infragistics controls and will keep you updated with my findings.

No further assistance is required. My fix above works for now. Thank you.

Hello,

I'm just following up to see if you need any further assistance until the release with this fix rolls out.

Hi Kristopher, the answer is as simple as it is - the client-side object models for the IG controls are exposed to provide flexibility and allow developers to create significant functionality on the client, without the need for server-side post-backs. Also, there is a chance that you do not want your app to depend on any libraries.

Apart from the WebMaskEditor, other controls contain not only value, but text or render html inside the element that contains them. In this case using jQuery .val() will not be the best way to get some value.

Please let me know if you have further questions.

Why do you suggest using .NET AJAX over using jQuery?  

Hi Christopher,

I have created a support case for you with an ID of CAS-155895-L0V2L2.  The issue has been logged in our internal tracking system with ID: 194197.  The next step will be for a developer to review my investigation and confirm my findings or to offer a fix, or other resolution

I will leave this case open and update you with any new information after the review.  You can also continue to send updates to this case at any time.

Please let me know if you have any questions.