Hello,I am having a problem with the WebMaskEditor and .NET's intrinsic validators. It appears that jQuery is trying to reference the WebMaskEditor with a ":v:" appended to the control name. Example code:
<ig:WebMaskEditor ID="wmeZipCode" runat="server" InputMask="00000" /><asp:CustomValidator ID="cuvWmeZipCode" runat="server" ErrorMessage="Please enter your five digit zip code." Text="" Display="None" CssClass="validatorMessage" EnableClientScript="true" ControlToValidate="wmeZipCode" ClientValidationFunction="wmeZipCode_ClientValidate" OnServerValidate="wmeZipCode_ServerValidate" ValidateEmptyText="true" />
When the client side validation executes I get the error: DOMException: Failed to execute 'querySelectorAll' on 'Document': '#wmeZipCode:v:' is not a valid selector.Does anyone have any idea why this is? I don't believe I have any other javascript that is interfering with this. My custom validator client script is really simple:
function wmeZipCode_ClientValidate(sender, e) {
var pattern = new RegExp(/^\d{5}$/); e.IsValid = pattern.test($('#<%=wmeZipCode.ClientID %>').val()); }
Thank you for your assistance.
Hello Kristopher,
I used your code in my sample and it ran fine, so I attached it for your reference. It uses 15.1.20151.1018 version of the product.
Since this may be a version related issue please run the sample with your version and let me know the result, or try to modify my sample in order to reproduce the issue and send it for investigation.
Looking forward to hearing from you.
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 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.
Why do you suggest using .NET AJAX over using jQuery?
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.
Hello,
I'm just following up to see if you need any further assistance until the release with this fix rolls out.
No further assistance is required. My fix above works for now. Thank you.