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

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

• javascript
• jquery
• asp
• customvalidator

Share Improve this question Follow asked Feb 25, 2014 at 5:47 SMISMI 31111 gold badge66 silver badges2222 bronze badges 9

• You have missed the parameter t o the function isPhoneNumberValid in textbox – Ramesh Rajendran Commented Feb 25, 2014 at 5:50
• I refered codingfusion./Post/CustomValidator-Example-in-asp-net – SMI Commented Feb 25, 2014 at 5:51
• have you noticed value and isValid casing too from your reference ? – Manoj Purohit Commented Feb 25, 2014 at 5:52
• Thats why I used alert() before that – SMI Commented Feb 25, 2014 at 5:54
• I mean to say check after replacing value with Value and isValid with IsValid – Manoj Purohit Commented Feb 25, 2014 at 5:56

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 4

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>