Credit Card Validation using jQuery

It always a good idea to validate credit card number on the client side before submitting the card details on the server side. If you accept credit card payment in your web application, credit card validation is the must-have functionality on the payment form. It helps to validate credit card number and other details before submitting the payment.

We can easily implement the credit card validation on the payment form using jQuery. In this tutorial, we will show you how to integrate credit card validation in payment form using jQuery. For better usability, we will create a simple jQuery plugin for credit card number validation. This jQuery plugin will detect and validate credit card numbers, and instantly tell you whether the card is valid or not.

Credit Card Validator jQuery

The Credit Card Validator jQuery plugin detect the card type by number and help to validate the credit card. It returns the following properties as an object.

• card_type — Returns an object with the below properties, or null if card type unknown
  • name — Returns string of the card type, eg visa
  • pattern — Returns card number pattern, eg /^4/
  • valid_length — Returns valid lengths for the card type, eg [13, 16]
• length_valid — Returns true if the number length is valid, false otherwise
• luhn_valid — Returns true if the Luhn checksum is correct, false otherwise
• valid — Returns true if the number is valid, false otherwise

Usage:
Use .validateCreditCard() method to add validation functionality to credit card number input field.

$('#card_number').validateCreditCard(function(result){ 

});

Note that: The creditCardValidator.js file is included in the source code, you don’t need to download it separately.

jQuery & Credit Card Validator Library

The example code uses jQuery, include the jQuery library first.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

To validate card number include the Credit Card Validator jQuery plugin.

<script src="creditCardValidator.js"></script>

JavaScript Code

The cardFormValidate() function helps to validate credit card details. At first card number is validated using Credit Card Validator plugin. After that, credit card expiry month, year, cvv, and name field are validated using jQuery.

<script>
function cardFormValidate(){
    var cardValid = 0;

    //card number validation
    $('#card_number').validateCreditCard(function(result){
        if(result.valid){
            $("#card_number").removeClass('required');
            cardValid = 1;
        }else{
            $("#card_number").addClass('required');
            cardValid = 0;
        }
    });
      
    //card details validation
    var cardName = $("#name_on_card").val();
    var expMonth = $("#expiry_month").val();
    var expYear = $("#expiry_year").val();
    var cvv = $("#cvv").val();
    var regName = /^[a-z ,.'-]+$/i;
    var regMonth = /^01|02|03|04|05|06|07|08|09|10|11|12$/;
    var regYear = /^2017|2018|2019|2020|2021|2022|2023|2024|2025|2026|2027|2028|2029|2030|2031$/;
    var regCVV = /^[0-9]{3,3}$/;
    if (cardValid == 0) {
        $("#card_number").addClass('required');
        $("#card_number").focus();
        return false;
    }else if (!regMonth.test(expMonth)) {
        $("#card_number").removeClass('required');
        $("#expiry_month").addClass('required');
        $("#expiry_month").focus();
        return false;
    }else if (!regYear.test(expYear)) {
        $("#card_number").removeClass('required');
        $("#expiry_month").removeClass('required');
        $("#expiry_year").addClass('required');
        $("#expiry_year").focus();
        return false;
    }else if (!regCVV.test(cvv)) {
        $("#card_number").removeClass('required');
        $("#expiry_month").removeClass('required');
        $("#expiry_year").removeClass('required');
        $("#cvv").addClass('required');
        $("#cvv").focus();
        return false;
    }else if (!regName.test(cardName)) {
        $("#card_number").removeClass('required');
        $("#expiry_month").removeClass('required');
        $("#expiry_year").removeClass('required');
        $("#cvv").removeClass('required');
        $("#name_on_card").addClass('required');
        $("#name_on_card").focus();
        return false;
    }else{
        $("#card_number").removeClass('required');
        $("#expiry_month").removeClass('required');
        $("#expiry_year").removeClass('required');
        $("#cvv").removeClass('required');
        $("#name_on_card").removeClass('required');
        return true;
    }
}
$(document).ready(function() {
    //card validation on input fields
    $('#paymentForm input[type=text]').on('keyup',function(){
        cardFormValidate();
    });
});
</script>

HTML Code

The following HTML creates a payment form to provide the credit card details.

<form method="post" id="paymentForm">
    <p>
        <label>Card number</label>
        <input type="text" placeholder="1234 5678 9012 3456" id="card_number" >
    </p>
    <p>
        <label>Expiry month</label>
        <input type="text" placeholder="MM" maxlength="5" id="expiry_month">
    </p>
    <p>
        <label>Expiry year</label>
        <input type="text" placeholder="YYYY" maxlength="5" id="expiry_year">
    </p>
    <p>
        <label>CVV</label>
        <input type="text" placeholder="123" maxlength="3" id="cvv">
    </p>
    <p>
        <label>Name on card</label>
        <input type="text" placeholder="Codex World" id="name_on_card">
    </p>
</form>

Conclusion

Our Card Validator jQuery plugin makes it simple and powerful to validate credit card number in a user-friendly way. This example code can be used in any types of credit card payment form, like Stripe payment gateway integration, PayPal Payments Pro integration, etc.