Credit Card Format Validation Forms jQuery Plugin

by Posted on

If you are working on any payment module system on your website and you have to validate user’s credit card information before form submit then in This post I am going to share one useful JavaScript library for building credit card forms, validating inputs, and formatting numbers.Payform is a jQuery-free JavaScript library used to format and validate form inputs related to credit card payments.
credit-card-validator-jquery
Supported card types:

  • Visa
  • MasterCard
  • American Express
  • Diners Club
  • Discover
  • UnionPay
  • JCB
  • Visa Electron
  • Maestro
  • Forbrugsforeningen
  • Dankort



Libraries

Load Latest jQuery library and the jQuery payform plugin in the document.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="dist/jquery.payform.js"></script>

HTML

Create credit card input forms where user will enter their credit card details and this plugin validate credit card details before for submit.

<div class="form-group">
  <label for="ccnum">Number</label>
  <input type="text" name="ccnum" id="ccnum" class="form-control">
</div>
<div class="form-group">
  <label for="expiry">Expiry</label>
  <input type="text" name="expiry" id="expiry" class="form-control">
</div>
<div class="form-group">
  <label for="cvc">CVC</label>
  <input type="text" name="cvc" id="cvc" class="form-control">
</div>
<div class="form-group">
  <label for="numeric">Numeric</label>
  <input type="text" name="numeric" id="numeric" class="form-control">
</div>



JS

Call the plugin and enable credit card validator.

$('#ccnum').payform('formatCardNumber');
$('#expiry').payform('formatCardExpiry');
$('#cvc').payform('formatCardCVC');
$('#numeric').payform('formatNumeric');

See live demo and download source code.

DEMO | DOWNLOAD

Generate sample credit card from this website (https://creditcardgenerator.in) and Test in Demo Page

This awesome plugin is developed by jondavidjohn. Visit their official github repository for more information and follow for future updates.


Published by admin