ClientValidationFunction in Custom validator not firing

Question

Google is full of this kind of questions but I guess my problem is little bit different. What make is different is here I used masked input I included jquery.maskedinput-1.2.2.js and jquery-1.7.2.min.js to use masked inputs. Code for masking is

 $(document).ready(
    function () {
        $("#txtPhoneNo").mask("?(999) 999-9999");
    });

but it is not validating length of input so I wrote javascript for that and used 'CustomValidator'as follows.

function isPhoneNumberValid(sender, args) {alert("l");
    if (args.value.length < 2)
        args.isValid = false;
}

alert("l"); itself will tell you that I just want to see whether this js function fires or not.

code for textbox and CustomValidator is as follow.

<asp:TextBox ID="txtPhoneNo" runat="server" CssClass="textbox3" size="60" Width="350px"
     TabIndex="4" ClientIDMode="Static"></asp:TextBox>

     &nbsp;<span style="font-size: 12px;">(000-000-0000)</span>  

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Phone number is not valid"
      ClientValidationFunction="isPhoneNumberValid" Font-Size="9pt" ForeColor="Red" ControlToValidate="txtPhoneNo"></asp:CustomValidator>

NOTE

Here in textbox ClientIDMode="Static" is used which may be problem.

PROBLEM

Problem is my js function is not firing at all. It must show alert if length of text is less than 2 but its not showing, instead making postback.

Could anyone help me out. Thanks

Answer 1

Your Main problem is, the Textbox is empty, so any args are not assigned before the user types any values in Textbox, so the function does not get called. If you type any values in textbox, then the custom validator is working good, so you need a RequiredFieldValidator.

Try this instead of your code

 <script>
    function isPhoneNumberValid(sender, args) {
        alert("l");
        if (args.Value.length < 2)
            args.isValid = false;
    }
</script>

<h3>We suggest the following:</h3>
<asp:TextBox ID="txtPhoneNo" runat="server" CssClass="textbox3" size="60" 
             Width="350px" TabIndex="4"></asp:TextBox>
&nbsp;<span style="font-size: 12px;">(000-000-0000)</span>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
     ValidationGroup="xxx" ControlToValidate="txtPhoneNo" Font-Size="9pt" 
     Display="Dynamic" ForeColor="Red" ErrorMessage="This field is Empty">
</asp:RequiredFieldValidator>
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage=
     "Phone number is not valid" ClientValidationFunction="isPhoneNumberValid" 
     Font-Size="9pt" ForeColor="Red" ValidationGroup="xxx" Display="Dynamic" 
     ControlToValidate="txtPhoneNo">
</asp:CustomValidator>
<asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="xxx" />

You need first check the asp:RequiredFieldValidator, then use custom validator

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
     ValidationGroup="xxx" ControlToValidate="txtPhoneNo" Font-Size="9pt" 
     Display="Dynamic" ForeColor="Red" ErrorMessage="This field is Empty">
</asp:RequiredFieldValidator>