HowTo: use jQuery input mask plugin in ASP.NET

Today I’ve got a requirement to force the user input to follow this international phone number format “(country-code) 1234-568” & because I love jQuery I started to look for an input mask plugin, I found this one.

So I built simple ASP.NET Web Application to start playing with it. It’s contains 3 TextBoxes/Input fields, first one for the landline phone number, second one for mobile phone number, & the third and last one for the date of birth.

Here’s the aspx code snippet:

<head id="Head1" runat="server">
    <title>jQuery Masked Input Demo</title>
    <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            //Input Mask for landline phone number
            $("#txtPhoneNumber").mask("(999) 9999-9999");

            //Input Mask for mobile phone number
            $("#txtMobileNumber").mask("(999) 999-9999");

            //Input Mask for date of birth or date in general
            $("#txtDOB").mask("99/99/9999");

        });
    </script>
</head>
<body>
    <form id="form" runat="server">
    <div>
    Phone Number: <asp:TextBox ID="txtPhoneNumber" runat="server" ClientIDMode="Static"></asp:TextBox>   (123) 1234-5678<br />
    Mobile Number: <asp:TextBox ID="txtMobileNumber" runat="server" ClientIDMode="Static"></asp:TextBox>  (012) 123-4567<br />
    Date of Birth: <asp:TextBox ID="txtDOB" runat="server" ClientIDMode="Static"></asp:TextBox>  22/08/1986
    </div>
    </form>
</body>

maskedinput

As you can see I’m using the new ASP.NET 4 feature ClientIDMode so I can select the 3 textboxes by their #IDs not by CSS .classes, why ID not Class? because of performance check this article point no 4.

The solution file:

10 thoughts on “HowTo: use jQuery input mask plugin in ASP.NET

  1. pooja dhingra

    Hi,

    I am using the same code but i am not getting this functionality, But if i use this code in a simple html page, then it works but i need it on a web form. can any1 tell me what i am missing here???

    Thanks in advance,

    1. EmadMokhtar

      Mostafa,

      It’s working with me and I attached a screenshot of running ASP.NET application, and ClientIDMode=”Static” to tell ASP.NET to render the ID of control as the ID you defined in code, that make this selecting $(“#txtPhoneNumber”) works

  2. Alex

    Hi, how about country codes? The value inside (…) is not the one, it’s a regional/mobile operator code. Country code should look like this /^+[1-9]{1}[0-9]{1,3}/ (or something like that) at the beginning of the .mask(“(999) 9999-9999″). Is it possible to allow different masks for the same field depending of the country code? Or at least make the number length flexible?

    Thanks,
    Alex

    1. EmadMokhtar

      You can implement this in JavaScript for example:

      if(countryCode == ‘EG’){
      $(“#txtPhoneNumber”).mask(“(999) 9999-9999″);
      }
      else{
      $(“#txtPhoneNumber”).mask(“(9999) 9999-9999″);
      }

  3. Arnab patra

    hi how about the money?and what should i do if the field is mandatory? will it also validtae mandatory/non empty fields?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>