Credit Card Numbers JavaScript Validating Tips and Codes

It's still amazing to me that so many sites have no idea how to make a simple form usable. This article presents methods for validating credit card numbers and dates in a user-friendly fashion.

Validating Credit Card Numbers

Everyone knows that a credit card number is normally made up of 12-16 numbers. However there are many ways that people type their number into a form, often including spaces or hyphens to break up the number and make it more readable.

A lot of forms set the maxlength of the field to 16 characters which means that you can type most of your number - using spaces or dashes to separate blocks of numbers - before running out of space and having to go back and remove the spaces before entering the rest. Why?!?

Others will let you enter the number with extra characters, but then send you back an error message when the form is submitted. Again, why?!?

Let's see how we can do it better:

What have we done then?:

• input length limited to 20 characters using maxlength;
• you can type the number however you want - using spaces or dashes or other characters as separators;
• when you exit the field (onBlur) any non-numeric characters are stripped out;
• when you return to the field (onFocus) your formatted string is replaced.

To achieve all this extra functionality you just need to add the following to your page:

<script type="text/javascript">

  // initialise variable to save cc input string
  var cc_number_saved = "";

</script>

and this is the code for the relevant form field (comments can be removed):

<input type="text" size="24" maxlength="20" name="cc_number" onBlur="

  // save input string and strip out non-numbers
  cc_number_saved = this.value;
  this.value = this.value.replace(/[^\d]/g, '');
" onFocus="
  // restore saved string
  if(this.value != cc_number_saved) this.value = cc_number_saved;
">

When the form is submitted the credit card input will be numbers only which is handy for processing. You should always validate all form input using a server-side script to cater for non-JavaScript browsers or exploit attempts.

Checking for valid credit card numbers

This example goes one step futher and also checks that the number entered is valid according to the Luhn algorithm (also known as the "mod 10" algorithm).

This requires an extra JavaScript function that implements the Luhn algorithm:

function checkLuhn(input)
{
  var sum = 0;
  var numdigits = input.length;
  var parity = numdigits % 2;
  for(var i=0; i < numdigits; i++) {
    var digit = parseInt(input.charAt(i))
    if(i % 2 == parity) digit *= 2;
    if(digit > 9) digit -= 9;
    sum += digit;
  }
  return (sum % 10) == 0;
}

For the logic and history behind the algorithm see the link above. Basically it's a method used by credit card companies for decades now to detect errors in card numbers without having to look up the actual account.

We then make a small addition to the onBlur handler from the previous example:

<input type="text" size="24" maxlength="20" name="cc_number" onBlur="

  // save input string and strip out non-numbers
  cc_number_saved = this.value;
  this.value = this.value.replace(/[^\d]/g, '');
  if(!checkLuhn(this.value)) {
    alert('Sorry, that is not a valid number - please try again!');
    this.value = '';
  }
" onFocus="
  // restore saved string
  if(this.value != cc_number_saved) this.value = cc_number_saved;
">

You can test this with your own credit card number or, if you're a less trusting individual, the sample next to the input box will also pass the test. Or you can save the contents of this link to your computer and do the testing there:

[Stand-alone example]

Checking onSubmit instead of onChange

If you don't want to clutter up your form with all those JavaScript events then the same checks can be made in a checkForm function called when the form is submitted:

<script type="text/javascript">

function checkLuhn(input)
{
  ...
}

function checkForm(form)
{
  ...
  if(!checkLuhn(form.cc_number.value.replace(/[^\d]/g, ''))) {
    alert("You have not entered a valid Card number, please check and try again");
    form.cc_number.focus();
    return false;
  }
  ...
}


</script>

User-friendly Date Validation

Another sticking point with online forms is date validation. People get confused between dd/mm/yyyy and mm/dd/yyyy not to mention other formats. In desperation a lot of sites implement drop-down lists for days, months and years - adding more complexity to the form and the scripts that have to parse the data.

Let's see what we can come up with:

What have we done?:

• limted input to 10 characters using the maxlength attribute;
• used the onKeyUp event to remove invalid characters as-you-type;
• used the previously presented checkDate function to validate the format; and
• if the format is correct, present the date in text format to the right of the input box.

The main advantage of this over the use of drop-down lists is that if the date entered does not exist, it's clear to the user. For example, entering 31/2/2004 will present a date string of 2 March 2004 which should alert the user that there's a problem.

Note: The actual format of the date presented to the user will vary across browsers and platforms. It should use the local 'Locale' settings of the computer but not all browsers do. Firefox 1.5 (Mac) in particular seems to always use mm/dd/yyyy format.

The code to achieve this is as follows (comments can be removed):

<input type="text" size="12" maxlength="10" name="start_date" onKeyUp="

  // allow only numbers and slashes
  this.value = this.value.replace(/[^\/\d]/g, '');
" onChange="
  if(checkDate(this) && document.getElementById) {
    // explode input and convert to Date object
    var parts = this.value.split('/');
    var testDate = new Date(parts[2], parts[1]-1, parts[0]);
    // update date string
    document.getElementById('confirm_start_date').innerHTML = '(' + testDate.toLocaleDateString() + ')';
  }
"> <small id="confirm_start_date">(dd/mm/yyyy)</small>

Note: To change the format to mm/dd/yyyy (US-format) just swap parts[0] and parts[1] in the above code.

The code for the checkDate function can be found in the article on Form Validation: Date and Time. In this example we've used a minYear of 1902 and a maxYear of the current year + 1.

The reason for using 1902 is that JavaScript on many platforms will not recognise dates earlier than 13 December, 1901 or after January 19, 2038 due to the binary equivalent of Y2K. See the link below to the Project 2038 FAQ for more details.

Why bother?

Some programmers are dismissive of client-side validation as it can't be used as a replacement for server-side validation and therefore creates more code to maintain. The reality is that some quite simple HTML, JavaScript or even Ajax code can make a big difference in terms of reducing the number of requests to the server and keeping your users happy.

The point of the above examples is to show how you can use a number of different techniques to filter form input. You can use the HTML maxlength attribute to restrict the number of input characters, filtering 'as you type' to limit or format input, and present 'feedback' to highlight where there might be problems before the form is submitted.

The key thing to keep in mind at all times is the user experience. If you're doing something to the input it should be obvious that it's happening and clear as to why it's being done.

Related Articles

• JavaScript: Form Validation
• JavaScript Form Validating Tips, Code and Examples
• JavaScript Date and Time Validating Tutorials
• JavaScript: Form Validation: Credit Cards and Dates
• Design Better HTML5 Form Element Validator