AllsWeb Blog
No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
Support
Knowledgebase
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
No Result
View All Result
AllsWeb White Logo
No Result
View All Result
Home JavaScript jQuery & AJAX

Credit Card Validation using jQuery

Credit Card Validator jQuery

Lakshika Mathur by Lakshika Mathur
December 19, 2019
Reading Time: 4 mins read
0
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. 

RELATED POSTS

Like Dislike Rating System with jQuery, Ajax, and PHP

Star Rating System with jQuery, Ajax, PHP, and MySQL

Form Validation using jQuery Validation Plugin

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

Tags: Credit CardjQuery
ShareTweetSendShareSharePinScan
Lakshika Mathur

Lakshika Mathur

Related Posts

Like Dislike Rating System with jQuery, Ajax, and PHP
jQuery & AJAX

Like Dislike Rating System with jQuery, Ajax, and PHP

January 6, 2020
785
Star Rating System with jQuery, Ajax, PHP, and MySQL
jQuery & AJAX

Star Rating System with jQuery, Ajax, PHP, and MySQL

January 6, 2020
167
Form Validation using jQuery Validation Plugin
jQuery & AJAX

Form Validation using jQuery Validation Plugin

January 2, 2020
35
Display Loading Image While Page Loads using jQuery and CSS
HTML & CSS

Display Loading Image While Page Loads using jQuery and CSS

January 1, 2020
46
Autocomplete Textbox with Multiple Selection using jQuery in PHP
jQuery & AJAX

Autocomplete Textbox with Multiple Selection using jQuery in PHP

December 29, 2019
1.3k
jQuery UI Autocomplete with Images and Custom HTML in PHP
HTML & CSS

jQuery UI Autocomplete with Images and Custom HTML in PHP

December 29, 2019
118
Next Post
Pagination in PHP with MySQL

Pagination in PHP with MySQL

How to Capture Screenshot of Website from URL using PHP

How to Capture Screenshot of Website from URL using PHP

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Comparison (3)
  • HTML & CSS (9)
  • Interesting Facts (1)
  • JavaScript (27)
    • jQuery & AJAX (18)
  • PHP and MySQL (48)
  • Security (10)
  • SEO (2)
  • Trademark (2)
  • Tutorials (5)
  • Uncategorized (1)
  • Web Hosting (19)
    • VPS Server (5)
  • WordPress (8)

Recent Posts

  • Is the Trademark valuable to your Brand or domain?
  • Ideas For Ten Fantastic Online Business From Home
  • Some best free WordPress Themes for Affiliate Marketing Websites
  • Home
  • Posts
  • Privacy Policy
  • Terms and Conditions

Built and Maintained With ♥ by AllsWeb Team

No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison

Built and Maintained With ♥ by AllsWeb Team

Go to mobile version