Credit Card Validator

by VipulS

HTML

<script src="https://rawgit.com/PawelDecowski/jquery-creditcardvalidator/master/jquery.creditCardValidator.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://heliosapp-test.azurewebsites.net/Content/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
<div class="row">
  <div class="col-lg-6">
    <div class="ibox ">
      <div class="ibox-title">
        <h5>Credit Card Validation</h5>
      </div>
      <div class="ibox-content">
        <div>
          <div class="form-group">
            <div class="row">
              <div class="col-xs-8">
                <label>Card Number</label>
                <input data-bind="creditcard: cardNumber" type="text" placeholder="1234 5678 1234 5678" class="form-control">
              </div>
              <div class="col-xs-4">
                <label>Type</label>
                <span data-bind="text: cardType" class="form-control">
                                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label>Name</label>
          <input data-bind="value: cardName" type="text" placeholder="Name on the Card" class="form-control">
        </div>
        <div class="form-group">
          <div class="row">
            <div class="col-xs-6">
              <label>Expiry Date</label>
              <input type="text" data-bind="value: expiryDate" MaxLength="5" placeholder="mm/yy" class="form-control">
            </div>
            <div class="col-xs-6">
              <label>CVV</label>
              <input data-bind="value: cvv" type="text" MaxLength="3" placeholder="123" class="form-control">
            </div>
          </div>

        </div>
      </div>
      <div...

TypeScript

//Custom Binding For Credit Card Validation
ko.bindingHandlers["creditcard"] = {
  init: (elm, va, all, vm) => {  	  
    $(elm).change(()=>{    	
    		vm.cardType('');
        vm.cardValid(false);
    		$(elm).validateCreditCard((result)=>{
          if(result && result.card_type){
          	vm.cardType(result.card_type.name);
          	vm.cardValid(result.valid);
          }
        });    	
    });    
  },
  update: (elm, va, all, vm) => {
    let v = va();
    $(elm).val(v()).change();
  }
};
//Credit Card View Model
class CreditCardViewModel{
	cardNumber: any;
  cardType: any;
  cardValid: any;
  cardName: any;
  expiryDate: any;
  cvv: any;
  
	constructor(){
  	this.cardValid = ko.observable(false);
  	this.cardNumber = ko.observable('').extend({
     validation: {
     	validator:()=>{
      	return this.cardValid();
      },
      message: 'Credit Card Invalid'
     }    	
    });
  	this.cardName = ko.observable('').extend({
    	required: true
    });
  	this.expiryDate = ko.observable('').extend({
    	required: true
    });
  	this.cvv = ko.observable('').extend({
    	required: true
    });
    this.cardType = ko.observable('');
    
  }
  
  public save(): void{
  	var errors = ko.validation.group(this);
    errors.showAllMessages();
  }
  public clear(): void{
  	var errors = ko.validation.group(this);
    errors.showAllMessages(false);
  }
}

$(document).ready(()=>{   
	let vm = new CreditCardViewModel();
  ko.applyBindings(vm);  
  setTimeout(()=> vm.cardNumber('5128815203566341'), 1000);
});

ko.validation.makeBindingHandlerValidatable("creditcard");