Credit Card Number Validation Using jQuery

Credit Card Number Validation Using jQuery
Today we are going to understand, how to do credit card number validation using jQuery. Most of the eCommerce website use transaction via credit card. Than you always need credit card number validation at client side.

We are using an HTML form to validate credit card input data. When user submit information via form than the jQuery code will be called to validate it.

For this validation we are using jQuery Credit Card Validator library. This library will detect credit card type, length and validate the card type.

How jQuery Credit Card Validator Plugin Works:

jQuery Credit Card Validator is a jQuery plugin which will take input as a card number returns an object with four properties. Check out below object properties explanation:

– card_type — Return an object with described below properties, or null if card type unknown

  • name — Return an card type, eg master card
  • range — Return an range string
  • length — Return card type length information, eg [13, 16]

– valid — Return true if the number is valid, otherwise gives false
– length_valid — Return true value if the card number length is valid, false otherwise
– luhn_valid — Return true if the Luhn checksum is correct, otherwise false

Include jQuery & Credit Card Validator Library:

Include the jQuery library in HTML form page.

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

Include the Credit Card Validator jQuery library to validate card number.

<script src=”jquery.creditCardValidator.js”></script>

Now write down an HTML form code to take credit card input. Initialize the input card number text by id=”card-number” for validation library.

HTML Form Code:

In above HTML form we validate credit card number via library code, also added mandatory input fields validation and regex pattern matching execute via jQuery.

On submit form if any wrong credit card number found than its shows an error message ‘Card Number is Invalid’.

validate credit card number

Here is jQuery Script code to validate credit card number on form submit and other validation performed.

You can use this jquery Credit Card Validator libaray to more interactive form and make client side validation without any hassle.

Check the demo of credit card number validation using jQuery and if you like, download it. 

DEMO

Leave a Comment