Formatting Credit Card Inputs

The more we can do for visitors to our sites that enhances the experience, the better. And if that helps us (the developer or client) out too? Well that's a bonus!

One of the things I've been trying to do lately is take a look at how I design and develop forms that users need to fill out. Many times there are fields that need to be validated and - while that needs to happen on the server side as well - it's always a better experience for the user to be notified on the spot if a field needs to be filled out a different way. But what if we can take that a step further and format the users' fields for them as they fill them out? Then we don't have to bother them with a nasty popup, etc. and avoid possible form - or worse, shopping cart - abandonment.

A simple example would be a phone number. We may always want a user to use this pattern: (555) 777-9999. The reality is, most of the time we get this pattern: 5557779999 or maybe a 555.777.9999 or 555-777-9999. Unfortunately, in our databases they end up all being a combination of these variations.

That's where formatter.js comes in.

Formatting Fields with a Common Pattern

Using the formatter.js plugin by firstopinion, we can use javascript or jQuery to force a pattern on a field. As the user types into the field, in any of the above ways, the formatter takes over and sets the field the way we want it. The process is really simple. Because the jQuery version is simpler (and that's what I would use), I'll quickly show you how to set it up for a phone number field.

Add the formatter.js File

Assuming you already have jQuery included in the HEAD, simply download and add the jquery.formatter.min.js file right below that. It should look like this:


<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.formatter.min.js"></script>

Initiating the Script

Now that the script is included, you just need to initiate the script on the phone number input field and set the pattern as an option of the function. I've used a pattern that would yield these results: (555) 777-9999


$('#phonenum').formatter({ 'pattern': '({{999}}) {{999}}-{{9999}}' });

There are also several other options that can be passed, but I'll let you look at the docs for the plugin for those.

See demos on the firstopinion GitHub

Formatting Credit Card Fields

Credit cards are, sadly, not as simple due to how American Express formats their card numbers. While most major card carriers follow a 4-4-4-4 digit format, AmEx uses a 4-6-5 format. This means that some extra logic needs to be in place to handle this sort of thing. Lucky for you, I've created an additional jQuery plugin extension that solves this issue!

Simply attach the jquery.formattercc.js file (download on github) after the jquery.formatter.min.js file and initiate the credit card fields like this:


$('#ccnum').formattercc({ cctypefield: '#cctype' });

See demo

In the example above, #ccnum is the credit card field. The ID of the select list that chooses the card type is passed to the function so the function can tell what card format to use. No pattern is necessary because the card types each have a set pattern.

Using this same extension, you can also format the CCV field for cards. Again, most card carriers use a 3-digit CCV number, but AmEx uses a 4-digit number. Same code as before, but with a couple of 'v's injected:


$('#ccvnum').formatterccv({ cctypefield: '#cctype' });

It seems like a lot, but it's really only a couple lines of code to format your strings the way you want them to - no messy popups for your users. (BTW: formatter.js can format text strings as well! Numbers are just an easy example.)

Happy formatting!

Drupal Paradise Ad