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.

<table>
<tr>
<td>Enter Identity No.:</td>
<td><input type="text" name="nic" id="nic" placeholder="00000-0000000-0"></td>
</tr>
<tr>
<td>Enter Date:</td>
<td><input type="text" name="date" id="date" placeholder="MM/DD/YYYY"></td>
</tr>
<tr>
<td>Enter Phone:</td>
<td><input type="text" name="phone" id="phone" placeholder="(000) 000-000"></td>
</tr>
<tr>
<td>Enter Phone Ext:</td>
<td><input type="text" name="ext" id="ext" placeholder="(000) 000-000 Ext.00000"></td>
</tr>
<tr>
<td>Enter Mobile:</td>
<td><input type="text" name="mobile" id="mobile" placeholder="+92 000 000 000"></td>
</tr>
<tr>
<td>Enter Percentage:</td>
<td><input type="text" name="percent" id="percent" placeholder="00%"></td>
</tr>
<tr>
<td>Enter Product Key:</td>
<td><input type="text" name="productkey" id="productkey" placeholder="a*-000-a000"></td>
</tr>
<tr>
<td>Enter Order No:</td>
<td><input type="text" name="orderno" id="orderno" placeholder="PO: aaa-000-***"></td>
</tr>
<tr>
<td colspan="2" align="center"><strong>Additional Features</strong></td>
</tr>
<tr>
<td>Date Without AutoClear:</td>
<td><input type="text" name="date2" id="date2" placeholder="MM/DD/YYYY"></td>
</tr>
<tr>
<td>Date Without AutoClear & Alert:</td>
<td><input type="text" name="date3" id="date3" placeholder="MM/DD/YYYY"></td>
</tr>
<tr>
<td>Mobile With Prefix:</td>
<td><input type="text" name="mobile2" id="mobile2" placeholder="+1 000 000 000"></td>
</tr>
</table>

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.

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

3. Create Script in jQuery

Now call the mask function after including the above libraries.

<script>
jQuery(function($){
$("#nic").mask("99999-9999999-9");
$("#date").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#ext").mask("(999) 999-9999? Ext.99999");
$("#mobile").mask("+99 999 999 999");
$("#percent").mask("99%");
$("#productkey").mask("a*-999-a999");
$("#orderno").mask("PO: aaa-999-***");
$("#date2").mask("99/99/9999", { autoclear: false });
$("#date3").mask("99/99/9999", {
    autoclear: false,
    completed:function(){
        alert("Completed!");
        }
    });
$("#mobile2").mask("+1 999 999 999");
});
</script>

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

Twitter Official Page: All PHP Tricks