asp.net textbox mask using jquery not working

Question

I'm trying to use the jquery mask to apply to an ASP.NET web form textbox . Nothing I do works... what am I missing?

<script type="text/javascript" src="/js/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#phone").mask("999-999-9999");
    });
</script>

This is the text box code:

<asp:TextBox runat="server" ID="phone" CssClass="rightsection" ToolTip="Please enter a phone number."></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="phone" Display="Dynamic" ForeColor="Red" Text="Required field" ValidationGroup="formfields" />

Answer 1

the textbox's id changes when it gets rendered to include the parent containers id, you can get the rendered id with ClientID like this

$("#<%= phone.ClientID%>").mask("999-999-9999");

The ClientID value is generated by concatenating the ID values of each parent naming container with the ID value of the control. In data-binding scenarios where multiple instances of a control are rendered, an incrementing value is inserted in front of the control's ID value. Each segment is separated by an underscore character (_).

Answer 2

This is the solution:

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>