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); } } });
});