Credit Card Validation using jQuery

It is always an excellent thought to validate the credit card number on the client-side before submitting the card details on the server-side. 

Therefore, if you accept credit card payments in your web application, there should be a functionality on the verification form of the credit card. So, it will help in validating the credit card number and other details before depositing the payment.

We can quickly implement credit card verification on payment forms using jQuery. In this tutorial, we will explain to you how to integrate credit card verification into a payment form using jQuery. 

For better usability, we will make a simple jQuery plugin for credit card number verification. This jQuery plugin will find and validate credit card numbers and immediately tell you whether the card is valid or not.

Credit Card Validator jQuery

The Credit Card Validator jQuery plugin detects the card type by number and helps 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  — If a string of the card type, is e.g., visa then returns it.
  • pattern — Returns card number pattern, e.g., /^4/
  • valid_length — Returns valid lengths for the card type, eg [13, 16]
• length_valid — If the number length is valid to return true, otherwise false
• luhn_valid — Returns true if the Luhn checksum is correct, false otherwise
• valid  — Returns true if the number is valid,

Usage:

 Use .validateCreditCard()   technique to add validation functionality to the credit card number input field.

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

});

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

jQuery & Credit Card Validator Library

The example code uses jQuery. Therefore, include it in the library first.

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

To validate card numbers, include the Credit Card Validator jQuery plugin.

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

JavaScript Code

The cardFormValidate() function will help to validate credit card pieces of information. Firstly, Valid the card number is by using Credit Card Validator plugin. Secondly, credit card expiry month, year, CVV, and at the last, 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 makes a payment form to give 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 example, plugin makes it easy and robust to validate credit card numbers in a user-friendly way. Therefore, You can use this example code in any credit card payment form, like Stripe payment gateway integration, PayPal Payments Pro integration, etc.

 Also, read our previous blog- International Telephone Input with Country Flags and Dial Codes using jQuery