JavaScript Credit Card Validation

Overview

This guide covers the following validation aspects:​

• Card Number Validation using the Luhn Algorithm
• Card Type Detection (Visa, MasterCard, etc.)
• Expiry Date Formatting and Validation
• CVV Validation
• Real-time Input Formatting

🧪 Implementation

1. Card Number Validation (Luhn Algorithm)

The Luhn Algorithm is a simple checksum formula used to validate identification numbers, such as credit card numbers.​

function isValidCardNumber(number) {
  const sanitized = number.replace(/\D/g, '');
  let sum = 0;
  let shouldDouble = false;

  for (let i = sanitized.length - 1; i >= 0; i--) {
    let digit = parseInt(sanitized.charAt(i), 10);

    if (shouldDouble) {
      digit *= 2;
      if (digit > 9) digit -= 9;
    }

    sum += digit;
    shouldDouble = !shouldDouble;
  }

  return sum % 10 === 0;
}

2. Card Type Detection

Detecting the card type helps in providing specific validations and UI cues.​

function getCardType(number) {
  const sanitized = number.replace(/\D/g, '');

  const cardPatterns = {
    Visa: /^4[0-9]{12}(?:[0-9]{3})?$/,
    MasterCard: /^5[1-5][0-9]{14}$/,
    AmEx: /^3[47][0-9]{13}$/,
    Discover: /^6(?:011|5[0-9]{2})[0-9]{12}$/
  };

  for (const [card, pattern] of Object.entries(cardPatterns)) {
    if (pattern.test(sanitized)) {
      return card;
    }
  }

  return 'Unknown';
}

3. Expiry Date Formatting and Validation

Ensures the expiry date is in MM/YY format and not in the past.

function formatExpiryDate(input) {
  const sanitized = input.replace(/\D/g, '').slice(0, 4);
  if (sanitized.length >= 3) {
    return sanitized.slice(0, 2) + '/' + sanitized.slice(2);
  }
  return sanitized;
}

function isValidExpiryDate(expiry) {
  const [month, year] = expiry.split('/').map(Number);
  if (!month || !year || month < 1 || month > 12) return false;

  const currentDate = new Date();
  const currentYear = currentDate.getFullYear() % 100;
  const currentMonth = currentDate.getMonth() + 1;

  return year > currentYear || (year === currentYear && month >= currentMonth);
}

4. CVV Validation

Validates the CVV based on card type.​

function isValidCVV(cvv, cardType) {
  const sanitized = cvv.replace(/\D/g, '');
  if (cardType === 'AmEx') {
    return /^\d{4}$/.test(sanitized);
  }
  return /^\d{3}$/.test(sanitized);
}

5. Real-time Input Formatting

Formats the card number input in real-time for better readability.​

function formatCardNumber(input) {
  const sanitized = input.replace(/\D/g, '').slice(0, 16);
  return sanitized.replace(/(.{4})/g, '$1 ').trim();
}

🧪 Example Usage

Here’s how you can integrate the above functions into your form:​

<form id="payment-form">
  <label>
    Card Number:
    <input type="text" id="card-number" maxlength="19" placeholder="1234 5678 9012 3456" />
  </label>
  <label>
    Expiry Date:
    <input type="text" id="expiry-date" maxlength="5" placeholder="MM/YY" />
  </label>
  <label>
    CVV:
    <input type="text" id="cvv" maxlength="4" placeholder="123" />
  </label>
  <button type="submit">Submit</button>
</form>

document.getElementById('card-number').addEventListener('input', (e) => {
  e.target.value = formatCardNumber(e.target.value);
});

document.getElementById('expiry-date').addEventListener('input', (e) => {
  e.target.value = formatExpiryDate(e.target.value);
});

document.getElementById('payment-form').addEventListener('submit', (e) => {
  e.preventDefault();

  const cardNumber = document.getElementById('card-number').value;
  const expiryDate = document.getElementById('expiry-date').value;
  const cvv = document.getElementById('cvv').value;

  const cardType = getCardType(cardNumber);

  if (!isValidCardNumber(cardNumber)) {
    alert('Invalid card number.');
    return;
  }

  if (!isValidExpiryDate(expiryDate)) {
    alert('Invalid expiry date.');
    return;
  }

  if (!isValidCVV(cvv, cardType)) {
    alert('Invalid CVV.');
    return;
  }

  alert('Payment details are valid!');
});

Regular Expressions for the most used debit/credit cards

Find more JavaScript tutorials, code snippets and samples here.

Ciprian on Thursday, September 14, 2017 in JavaScript DOM | Last modified on Wednesday, April 30, 2025

Related Posts

April 30, 2025

Equal Height for All Elements Using Vanilla JavaScript

April 30, 2025

How to Defer Image Loading with Vanilla JavaScript

March 10, 2023

SEO Crawlability Issue: Resources are formatted as page link