Scrubbing text entry fields is hard, let’s go shopping

Today a customer noted that one of their customers had a problem with the site:

Credit card billing form was written by a computer programmer for computer programmers, not users. E.g., the field for entering a credit card number does not accept spaces between groups of numbers but doesn’t tell the user, so the info must be re-entered.

Good point (although I must note that a web designer created that page, if it matters any).

Now, to retort slightly: Unless you just got your PC a few weeks ago, you should be used to everyone on the internets asking you to enter your CC with no dashes or spaces. It’s just how things are done!

In the past, it was because JavaScript to handle the validation was too flaky, complex, or the logs said too many users disabled JavaScript (since “7 On Your Side” recently ran a MASSIVE EXPOSÉ on THE DANGER OF COOKIES!, or whatever) and the back-end guy didn’t want to write any validation.

Anyway … it became common practice. And it still is. And it’s time this changes.

There’s somethings you need to think about to really do it right, though.

It’s not that it’s hard. I mean, you can handle the entire thing in a few regexes.

It’s more like, HTML sanitizer hard, not NP-Complete Problem hard. You can get it done if you sit down and do the work, test a bunch, and find all the loopholes you can.

The problem is that once you allow users to enter text in a manner they prefer, they’re goddamn well going to.

If you are now rolling your eyes and saying, “How many ways can someone enter a credit card number, for fuck’s sake?” then my instant retort is, either you have amazingly smart users or you’ve never spent hours looking at logs from a large e-commerce operation.

Turns out they’ll mash a peanut butter-and-jelly sandwich into the keyboard while shouting the credit card number at the cat, and then complain loudly that it doesn’t work.

People honestly want to use spaces, dashes, dots, ampersands …

Whatever they can get away with; whatever they think is “right”. (Don’t get me started on dates and phone numbers).

You’ll start off with

$CC =~ s/[-\s]//g;

but then someone will want dots, too:

$CC =~ s/[-\s\.]//g;

A quick check of the logs shows someone thinks ‘/’ is a totally cool way to separate CC groups. Oh god.

$CC =~ s/[-\s\.\/]//g;

This goes on for a while. Also while we’re at it, let’s do a bunch of other things:

• We’ll want to check before submitting that the CC starts with a valid number, basically, 3, 4, or 5
• Check the number of digits, which is 14, 15, or 16 digits, depending on the card type (eg some Amex have a funny number of digits)

There’s a bunch of other edge cases we came up with after extensive prowling of the logs.

We haven’t even gotten to the expiration date yet! That’s practically another post: the only thing screwed up more than the CC number, is the date. People will try every possible combination of ways you can imagine to enter 4 digits. We’ve seen users throw fits over the concept of “zero-pad the date” (meaning January is ‘01′ not ‘1′).

If nothing else, this is why you still see rigid CC entry fields: everyone’s decided it’s not worth catering to the 3% of users that refuse to do what the other 97% do.