JQuery Mask Plugin for Masking Form Inputs

Published in

Smartherd

3 min readFeb 25, 2019

jQuery Mask Plugin is a lightweight plugin, which is very easy to add and implement. It is user-friendly and eliminates the mess to handle the data formatting at the server end. It helps to fetch the formatted data. When it comes to the user, the plugin automatically applies the mask to the data, when the user enters the data.

It is very helpful for the forms containing phone numbers, zip codes, dates. You can also define the custom data validation format that you expect from the field.

But why Input Mask?

When dealing with data, which comes from filling a form online, on a website or portals, you might want the data to be formatted in a certain manner. No doubt, you can provide instructions with each field, but there will be a wide range of users filling the form. Not all might give you the data in the format that you want. Also, the user might not want to keep formatting the data.

How about providing the user with some preformatted form fields? How about getting the data formatted as they type in the details?

Yes, using this input mask reduces yours as well as the users’ load. You don’t have to use the server end formatting before saving the data, and the user doesn’t have to keep focusing on data which he is typing. And of course, you have the choice to save the formatted data or the raw.

You can see the example below to better understand how it looks.

See the Pen wxjGrR by Smartherd (@Smartherd) on CodePen.

You can type the data in the fields above and see yourself how the input mask has made the data formatting easy. Implementing jQuery mask plugin is very too. So let us see, where to get it from and how to use it.

Where to get it from?

You need to include the jQuery library along with the jQuery Input Mask plugin to be able to use it in your webpage. You can get it in your local or get it from CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>

I have included in the Codepen as well.

Basic Syntax

To mask the input, you can use this jQuery Input Mask plugin in two ways.

Use .mask(...) with the jQuery selector
Use the HTML attribute data-mask

In the Codepen example above, I have used thejQuery selector for data and zip whereas, for the phone number, I have used the HTML data-attribute.

List of examples

Here are a few examples from the documentation page of the plugin.

$('.date').mask('00/00/0000'); $('.phone').mask('(000) 000 0000'); $('.zip').mask('000 000'); $('.date_time').mask('00/00/0000 00:00:00'); $('.id').mask('SSS 000-A0A'); $('.ip_address').mask('0NN.0NN.0NN.0NN', { 
    translation: { 
        'N': { 
            pattern: /[0-9]/, optional: true 
        } 
    } 
}); $('.ip_address').mask('099.099.099.099');

Translations

The translations are added to the plugin for each character that we use in .mask(..). These translations help the plugin mask the input data as required. The available default translations are:

'0': {pattern: /\d/}, 
'9': {pattern: /\d/, optional: true}, 
'#': {pattern: /\d/, recursive: true}, 
'A': {pattern: /[a-zA-Z0-9]/}, 
'S': {pattern: /[a-zA-Z]/}

The jQuery mask recognizes the alphabets A(alphabets and digits) and S(alphabets) only. However, you can extend the translations so that the plugin recognizes more alphabets.

From the example cited at the jQuery input mask plugin documentation page:

$('.field').mask('AA/SS/YYYY', {
    'translation': { 
        A: {
            pattern: /[A-Za-z0-9]/}, 
        S: {
            pattern: /[A-Za-z]/}, 
        Y: {
            pattern: /[0-9]/} 
    } 
});

Here the mask uses the default A and S. With that, we have the new alphabet character Y for masking. for which the user has to input digits into the input elements. This way, you can customize the existing ones as well as add new ones as per your requirements.

Using HTML data attribute

In the example above, the phone number input field has used the HTML data attribute to define the mask.

<input type="text" id="phone" data-mask="(000) 000 0000"/>

Using this data-mask attribute is almost the same as using .mask(..) with jQuery selector. The code looks cleaner and becomes easier to find.

However, for the translation customization and addition, you need to use the jQuery .mask(..).

Remove Masks and Get Unmask Typed Input

To remove the mask: $('#date').unmask();
To get the unmasked input: $('#date').cleanVal();

Using the input masking reduces a lot of words related to data processing on the server end. Do check out jQuery Input Mask documentation for further details and customization of the plugin.

Thanks for reading and supporting us. Happy coding!

Originally published at www.smartherd.com.