Payment Card Validation

by Santosh Thakur

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="cxl-body form-horizontal">
  <div class="row">
    <div class="col-sm-2 col-xs-12">
      <label class="control-label">Payment method
        <sup>*</sup>
      </label>
    </div>
    <div class="col-sm-6 col-xs-12">
      <div class="form-group form-group-sm">
        <select id="cardType" class="form-control" onchange="getcardValue(this,event);">
          <option value="Select a Card">Select a Card</option>
          <option value="Visa">Visa</option>
          <option value="Master Card">Master Card</option>
          <option value="American Express">American Express</option>
          <option value="Diners Club">Diners Club</option>
          <option value="Discover">Discover</option>
          <option value="Carte Blanche">Carte Blanche</option>
        </select>
      </div>
    </div>
    <div class="col-sm-4 col-xs-12">
      <div id="cards" class="customer-card">
        <span title="Visa" class="visaCard" onclick="setccValue('Visa',event)" default="1">1</span>
        <span title="Master Card" class="masterCard" onclick="setccValue('Master Card',event)" default="2">2</span>
        <span title="American Express" class="americanCard" onclick="setccValue('American Express',event)" default="3">3</span>
        <span title="Diners Club" class="dinersCard" onclick="setccValue('Diners Club',event)" default="4">4</span>
        <span title="Discover" class="discoverCard" onclick="setccValue('Discover',event)" default="5">5</span>
        <span title="Carte Blanche" class="carteCard" onclick="setccValue('Carte Blanche',event)" default="6">6</span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2 col-xs-12">
      <label class="control-label">Credit/Debit Card no.
        <sup>*</sup>
      </label>
    </div>
    <div class="col-sm-6 col-xs-12">
      <div class="form-group form-group-sm">
        <input...

CSS

body {
  font-size: 12px;
}

JavaScript

//After click on car image
function setccValue(card, event) {
    debugger;
    element = $(event.target);
    element.siblings().removeClass("active");
    element.addClass("active");
  
    if (card == "American Express") {
      var source = "/resources/assets/ccv-img2.gif";
      $(".ccvimg").attr("src", source);
      $(".cvv-wrapper").find('.numberCvv').html("4 Digit Number From Your Card");
    } else {
      var source = "/resources/assets/ccv-img.gif";
      $(".ccvimg").attr("src", source);
      $(".cvv-wrapper").find('.numberCvv').html("3 Digit Number From Your Card");
    }
    $("#cardType").val(card);
  
  }
  
  //Change from select
  function getcardValue(card, event) {
  debugger;
      if( card.value =="American Express"){
          var source = "/resources/assets/ccv-img2.gif";
          $(".ccvimg").attr("src", source);
          $(".cvv-wrapper").find('.numberCvv').html("4 Digit Number From Your Card");
      }else{
          var source = "/resources/assets/ccv-img.gif";
          $(".ccvimg").attr("src", source);
          $(".cvv-wrapper").find('.numberCvv').html("3 Digit Number From Your Card");
      }

      $('.customer-card').find('span').removeClass("active");
      $('.customer-card').find('span[title="' + card.value + '"]').addClass("active");

  }