Mask Input Field Using jQuery

Demo Download

When working with the web forms, we require validations in our input fields to collect the data in the required format, such as date in specific format, phone number, mobile number, any required specific format, today i will show you how can we mask input fields using jQuery. jQuery is very helpful to achieve this goal.

For this purpose i will be using a very great jQuery Library created by Josh Bush, you can find him at github.

So lets start, first i want you to know that i will use few characters in my script which will refer the following meanings:

a will represent an alpha characters starting from (A-Z,a-z)
9 will represent a numeric character starting from (0-9)
* will represent a combination of an alphanumeric character (A-Z,a-z,0-9)

Steps to Create a Mask Input Field Using jQuery

  1. Create HTML Form
  2. Include jQuery Library and Masked Library
  3. Create Script in jQuery

1. Create HTML Form

I am sharing different masked input fields example, therefore i am creating multiple input fields to show you different examples. You can use any of them which is required to you. Or you can simply copy paste all to see how they all are working.

2. Include jQuery Library and Masked Library

Now we need to include the jQuery library and Masked library. You can add both before closing </body> tag.

3. Create Script in jQuery

Now call the mask function after including the above libraries.

Demo Download

If you found this tutorial helpful, share it with your friends and developers group.

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook.

Facebook Official Page: All PHP Tricks

Article By
Javed Ur Rehman is a passionate blogger and web developer, he loves to share web development tutorials and blogging tips. He usually writes about HTML, CSS, JavaScript, Jquery, Ajax, PHP and MySQL.

Leave a Reply

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