Terrific job on this awesome and helpful jQuery plugin. It works great. I’m wondering if there’s a better way to allow 15 OR 16 digits… for a single credit card field.

For the benefit of future readers, AmEx cards have 15 digits, while Visa, MasterCard and Discover have 16. What I’ve done is tweaked the code provided here, as well as add some other JavaScript that checks the card type and if it is AmEx then switches the mask applied to the field. Here’s how I did it:

First, add (to your masking code):

$(“#card_number”).mask(‘xxxxxxxxxxxxxxxx’);

Then add (to var charMap, around line 65 of jquery.maskedinput-1.1.4.js):

‘x’:”[0-9\\u2666]”

These two mods allow you to use numbers OR the Unicode Diamond Character in your mask… for obscuring the CC# onblur. I have another JS that performs a simple string.length and substring on the card number to change the first 12 chars to a diamond and store the real number in a hidden field.

So, now we have to change the mask on the fly to 15 chars if the user wants to use an AmEx card. Here’s where it would be helfpul to have OR syntax in the Regex… like [x]{15,16}?? I can’t figure out how to put an OR in the mask.

Anyway, here’s the code that I found works (on FF3,Opera9,Win, but not Safari or Chrome).

Add this after your jQuery includes and other JavaScripts in the head.

function pickAmex()
{
jQuery.noConflict();(function($) {
$(function() {
$(“#card_number”).unmask();
$(“#card_number”).mask(‘xxxxxxxxxxxxxxx’);
});
})(jQuery);
}
function pickNotAmex()
{
jQuery.noConflict();(function($) {
$(function() {
$(“#card_number”).unmask();
$(“#card_number”).mask(‘xxxxxxxxxxxxxxxx’);
});
})(jQuery);
}

You then put: onfocus=”pickAmex()” on the AmEx radio button, and onfocus=”pickNotAmex()” on the Visa, MC & Discover buttons. Presto, the mask changes on the fly to 15 characters or 16 characters, respectively.

If there’s a better way to do this with better browser support, I’m all ears!

555-555-5555

but continue if he wanted to to enter this;

555-555-5555 x5555

Any ideas?