Press "Enter" to skip to content

JavaScript Credit Card Number Validator Plugin | js-CreditCardValidator

CreditCardValidator is a simple, vanilla JavaScript credit card validator checker that has the ability to check and verify credit card numbers, expiration dates, and CVV.

credit card validation javascript code, how to validate credit card, card validation in html with demo, credit card validator with cvv, credit card number input field html

💳 Make Your Credit Card Form Better In One Line Of Code | Card.js

How to make use of it:

1. HTML structure of credit card form.

<div class="card-bounding">
  <aside>Card Number:</aside>
  <div class="card-container">
    <!--- ".card-type" is a sprite used as a background image with associated classes for the major card types, providing x-y coordinates for the sprite --->
    <div class="card-type"></div>
    <input placeholder="0000 0000 0000 0000" onkeyup="$cc.validate(event)" />
    <!-- The checkmark ".card-valid" used is a custom font from icomoon.io --->
    <div class="card-valid">&#xea10;</div>
  </div>
  <div class="card-details clearfix">
    <div class="expiration">
      <aside>Expiration Date</aside>
      <input onkeyup="$cc.expiry.call(this,event)" maxlength="7" placeholder="mm/yyyy" />
    </div>
    <div class="cvv">
      <aside>CVV</aside>
      <input placeholder="XXX"/>
    </div>
  </div>
</div>

2. Download and install the Basic JavaScript CreditCardValidator.js.

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

3. Apply your own CSS styles to the credit card template.

.card-bounding {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 30px;
  border: 1px solid #3e73ea;
  border-radius: 6px;
  font-family: 'Roboto';
  background: #ffffff;
}
.card-bounding aside {
  font-size: 24px;
  padding-bottom: 8px;
}
.card-container {
  width: 100%;
  padding-left: 80px;
  padding-right: 40px;
  position: relative;
  box-sizing: border-box;
  border: 1px solid #ccc;
  margin: 0 auto 30px auto;
}
.card-container input {
  width: 100%;
  letter-spacing: 1px;
  font-size: 30px;
  padding: 15px 15px 15px 25px;
  border: 0;
  outline: none;
  box-sizing: border-box;
}
.card-type {
  width: 80px;
  height: 56px;
  background: url("images/cards.png");
  background-position: 0 -291px;
  background-repeat: no-repeat;
  position: absolute;
  top: 3px;
  left: 4px;
}
.card-type.mastercard { background-position: 0 0; }
.card-type.visa { background-position: 0 -115px; }
.card-type.amex { background-position: 0 -57px; }
.card-type.discover { background-position: 0 -174px; }
.card-valid {
  position: absolute;
  top: 0;
  right: 15px;
  line-height: 60px;
  font-size: 40px;
  font-family: 'icons';
  color: #ccc;
}
.card-valid.active { color: #42ca7c; }
.card-details {
  width: 100%;
  text-align: left;
  margin-bottom: 30px;
  transition: 300ms ease;
}
.card-details input {
  font-size: 30px;
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
}
.card-details input.error {
  border: 1px solid #c2313c;
  box-shadow: 0 4px 8px 0 rgba(238,76,87,0.3);
  outline: none;
}
.card-details .expiration {
  width: 50%;
  float: left;
  padding-right: 5%;
}
.card-details .cvv {
  width: 45%;
  float: left;
}

Minimal Credit Card Input Validation Library, js-CreditCardValidator Plugin/Github


See Demo And Download

Official Website(DysonJ): Click Here

This superior jQuery/javascript plugin is developed by DysonJ. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.