jQuery credit card validator – Creditly.js

Creditly.js is a jQuery credit card validator plugin – create and validate credit card form inputs in an easy way.

Well done jQuery credit card validator

Creditly.js is a jQuery plugin for creating an input masked form with input validation for your customers that makes it easier to input credit card information.

Creditly.js is a solution, that gives everything we need to create an intuitive credit card form. We can create such a form in few moments.

Creditly.js - jQuery credit card validator in action
Creditly.js – jQuery credit card validator in action

How to use

To integrate, just add the necessary files:

<script type="text/javascript" src="creditly.js"></script>

<link rel="stylesheet" href="creditly.css">

Then copy the HTML from the theme you’d like to use (check the HTML files in src/themes folder).

Initialize with JS:

    var creditly = Creditly.initialize(
        '.creditly-wrapper .expiration-month-and-year',
        '.creditly-wrapper .credit-card-number',
        '.creditly-wrapper .security-code',
        '.creditly-wrapper .card-type');

Themes

Currently the following themes are supported:

– blue_theme

– gray_theme

In fact it’s not hard to crate our own themes.

Submitting a form

When a user wants to submit a form, Creditly.js can be used to perform validation on the fields, and return an output of the results if the validation succeeded.

For example:

var creditly = Creditly.initialize(
    '.creditly-wrapper .expiration-month-and-year',
    '.creditly-wrapper .credit-card-number',
    '.creditly-wrapper .security-code',
    '.creditly-wrapper .card-type');
$(".creditly-card-form .submit").click(function(e) {
  e.preventDefault();
  var output = creditly.validate();
  if (output) {
    // Do something with your credit card output.
    console.log(output["number"]);
    console.log(output["security_code"]);
    console.log(output["expiration_month"]);
    console.log(output["expiration_year"]);
  }
});

The first part of the above example instantiates the creditly object in the creditly variable. Then, whenever the .creditly-card-form .submit button is clicked, we perform a validation by using creditly.validate().

Errors of validation

A jQuery event will be triggered on the body element, and can be accessed as:

$("body").on("creditly_client_validation_error",
  function(e, data) {
    alert(data["messages"].join(", "));
});

Note: if jQuery does not exist on the page, then a MessageEvent will be fired on the body element and can be accessed in following way:

document.body.addEventListener("creditly_client_validation_error", 
  function(e) {
    alert(e.data["messages"].join(", "));
}, false);

Simple and clever.

License: MIT

Demo:

http://wangjohn.github.io/creditly

Get jQuery credit card validator from GitHub:

https://github.com/wangjohn/creditly

You may also like:

Ideal Forms 3: build and validate responsive HTML5 forms!

Progression.js – jQuery form progress indicator

€$Enjoy!$€

Share:Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1