Credit Card Number/Type/Length/Luhn Validator - jquery.creditCardValidator.js

File Size: 28.4 KB
Views Total: 5300
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Credit Card Number/Type/Length/Luhn Validator - jquery.creditCardValidator.js

Just another jQuery based credit card number validator designed for your eCommerce website or online store.

The credit card number validator checks whether the number, number length, luhn checksum are valid and return detected credit card type when typed.

How to use it:

1. Download and insert the main JavaScript file jquery.creditCardValidator.js after jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.creditCardValidator.js"></script>

2. Create a credit card input on the webpage.

<input class="cc">

3. Call the function on the input field to live valide your credit card number when typing.

$(function() {
  $('input').validateCreditCard();
});

4. Output the validation messages on the webpage.

$(function() {
  $('input').validateCreditCard() {
    $('.output').html('Card type: ' + (result.card_type == null ? '-' : result.card_type.name)
     + '<br>Valid: ' + result.valid
     + '<br>Length valid: ' + result.length_valid
     + '<br>Luhn valid: ' + result.luhn_valid);
  });
});

This awesome jQuery plugin is developed by rakeshsahu1512. For more Advanced Usages, please check the demo page or visit the official website.