Using jQuery Mask to Mask Form Input

Posted on

Oh the glory that is the standard user filling out a form. They will always and without fail manage to fill in form inputs with a variety of different formats for things like phone numbers and postal codes. Luckily we can use jQuery Mask to ensure the user’s input is already formatted the way we want it.

Before we get started I just wanted to point out to links you might want to visit:

So without further ado let’s get started.

What is jQuery Mask?

jQuery Mask “a jQuery Plugin to make masks on form fields and HTML elements”. The plugin is extremely useful if you’re looking to gather user data such as phone numbers or postal codes and you want them to be uniformly formatted without using PHP or something to do it afterward.

The plugin is extremely simple to use and it’s also very user-friendly. Even though the plugin changes the user’s input as they type it does it in a way that’s non-intrusive and if they aren’t looking up at the screen they most likely won’t even know it happened. You’ll see what I mean more when we go over the demo code.

Demo

See the Pen jQuery Mask Demo by Alex Dobson (@SufferMyJoy) on CodePen.

As you go through the demonstration code above you’ll probably see what I mean by the non-intrusive part of the plugin that I talked about above. For example, if you type “555-555-5555” into the phone number input, it will simply skip the “-” character’s you wrote and keep going. I like this because the user doesn’t really have to match up to the formatting of the input, rather it will work with what the user types and format it to match the mask.

Let’s go over some of the important parts of the demonstration code. Firstly, know that since I’ve hosted this on CodePen I’ve added two libraries to the code that you can’t really see at first glance:

  • jQuery (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js)
  • jQuery Mask (https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js)

These are added in the settings of the CodePen pen so you don’t really see them, but you’ll have to include both in your project for this to work.

In order to mask an input, you either need to add a jQuery selector and .mask( … ) function or use the HTML data attribute data-mask. First let’s take a look at a jQuery selector example:

jQuery Selector

Below you can see the date example from the demo code which uses the jQuery selector method. The postal code and phone number examples also use the jQuery selector method but the SIN number example uses the HTML data attribute method to mask it’s input.

As you can see I simply like to use the input’s name field to select it and then you can mask it with the .mask( … ) function. The .mask( … ) function takes in a series of numbers and letters that end up translating to regular expressions. In this case we have:

00/00/0000

which translates to something like 12/04/2017. Note that this does not make the user unable to mix up their days and months. I would still recommend using something like the Date Picker from jQuery UI when it comes to dates as input.

The .mask( … ) function knows to mask these a certain way because of translations tied to the characters in the plugin. By default the translations are as follows:

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

These can also be changed on the fly though. If you want to overwrite one or add a new one you can simply do something like the following example from the jQuery Mask documentation and demos page:

Using these translations and defining custom ones you can pretty much do whatever you want.

Let’s take a look at using an HTML data attribute now.

HTML Data Attribute

Using the HTML data attribute method is very similar to using the jQuery selector method only you put your mask right in the <input … />. When I’m using this plugin I actually use this method pretty often in my template files since it keeps everything looking a little more clean and easier to find. See the SIN number example from the demo code below:

There’s really nothing else that special about using this method. The one thing I will say is that I don’t think there is a way to define custom translations using this method like you could with the jQuery selector method. If that’s something you’re looking to do then stick to the jQuery method.

Using jQuery Mask in WordPress

To use jQuery mask in your WordPress installation simply include it when you enqueue scripts in your functions.php file. The following code will work assuming you have a /js directory in your theme:

This code is taken directly from DobsonDev Underscores, which includes jQuery Mask by default. If you haven’t checked it out yet I would obviously recommend it. It’s my own version of the Underscores.me WordPress starter theme but with Foundation and a whole lot of other libraries added to it.

I hope you’ll all check out jQuery Mask after reading this article. It’s extremely simple to use and beats a lot of post processing on your input’s from users. If you have any helpful tips or tricks involving jQuery Mask please let us know in the comments!

As always thank you for reading and please share it around as much as you can! Please feel free to put any suggestions or ideas for future tutorials in the comments section below.