A credit card form using jQuery.payment

form.html

<form accept-charset="UTF-8" action="/payment" class="cardInfo" method="post">

  <fieldset class="cardInfo__cardDetails">

    <div class="form-row cardInfo__cc-num">
      <label for="cc-num"><abbr title="required">*</abbr><span>Card Number</span></label>
      <div class="cc-num__wrap">
        <!-- using type="tel" because type="number" doesn’t pass HTML5 form validation with jQuery.payment formatting -->
        <input id="cc-num" type="tel" class="paymentInput cc-num" placeholder="•••• •••• •••• ••••" autocompletetype="cc-number" required="required">
        <span class="card" aria-hidden="true"></span>
      </div>
    </div>

    <div class="form-row cardInfo__cc-exp">
      <label for="cc-exp"><abbr title="required">*</abbr><span>Expires</span></label>
      <input id="cc-exp" type="tel" class="paymentInput cc-exp" placeholder="MM / YY" autocompletetype="cc-exp" required="required">
    </div>

    <div class="form-row cardInfo__cc-cvc">
      <label for="cc-cvc"><abbr title="required">*</abbr><span>CVC</span></label>
      <input id="cc-cvc" type="tel" class="paymentInput cc-cvc" placeholder="CVC" autocompletetype="cc-cvc" required="required">
    </div>

    <div class="cardInfo__submission">
      <input class="button" name="commit" type="submit" value="Make Payment">
      <a class="cancel-link" href="/">Cancel</a>
    </div>
    
  </fieldset>

</form>

styles.css

.paymentInput.identified{
  border-color:#2ecc71;
}

.paymentInput.identified:focus{
  border-color:#2ecc71;
  box-shadow: 0 0 .1875em #2ecc71;
}

.cc-num__wrap{
  position:relative;
}

.card{
  position:absolute;
  display:block;
  right:.375em;
  top:50%;
  margin-top:-10px;
  width:28px;
  height:19px;
  background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjExMSw3Ni4yOTZjMCwyLjg0NCwyLjMwNSw1LjE0OCw1LjE0Nyw1LjE0OGg4MS44OTEgICAgYzIuODQxLDAsNS4xNDctMi4zMDUsNS4xNDctNS4xNDh2LTMyLjg5SDMuMTExVjc2LjI5NnogTTY5LjY3OSw1NS42OTdoMTUuOTE0djE1LjkxNEg2OS42NzlWNTUuNjk3eiBNOTAuMTQ5LDE3LjUwM0g4LjI1OCAgICBjLTIuODQyLDAtNS4xNDcsMi4zMDUtNS4xNDcsNS4xNDd2Ny42OTNoOTIuMTg2VjIyLjY1Qzk1LjI5NywxOS44MDgsOTIuOTksMTcuNTAzLDkwLjE0OSwxNy41MDN6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+) no-repeat center center;
  background-size: 100%;
}

.cardInfo__cc-exp,
.cardInfo__cc-cvc{
  float:left;
  max-width:4.875em;
}

.cardInfo__cc-exp{
  margin-right:.75em;
}

.cc-num.visa + .card{
  background:url('visa.png') no-repeat center center;
}

.cc-num.amex + .card{
  background:url('amex.png') no-repeat center center;
}

.cc-num.mastercard + .card{
  background:url('mastercard.png') no-repeat center center;
}

.cc-num.diners + .card{
  background:url('diners.png') no-repeat center center;
}

.cc-num.discover + .card{
  background:url('discover.png') no-repeat center center;
}

validations.js

// include jquery and jquery.payment before here

$(function() {
  
  var validateDetails = function() {
    // set variables for the expiry date validation, cvc validation and expiry date 'splitter'
    var expiry = $('.cc-exp').payment('cardExpiryVal');
    var validateExpiry = $.payment.validateCardExpiry(expiry["month"], expiry["year"]);
    var validateCVC = $.payment.validateCardCVC($('.cc-cvc').val());
    // if statement on whether the card’s expiry is valid or not
    if (validateExpiry) {
      // if the expiry is valid add the identified class
      $('.cc-exp').addClass('identified');
    } else {
      // remove again if the expiry becomes invalid
      $('.cc-exp').removeClass('identified');
    }
    // if statement on whether the card’s cvc is valid or not
    if (validateCVC) {
      // if the cvc is valid add the identified class
      $('.cc-cvc').addClass('identified');
    } else {
      // remove again if the cvc becomes invalid
      $('.cc-cvc').removeClass('identified');
    }
  }
  // this runs the above function every time stuff is entered into the card inputs
  $('.paymentInput').bind('change paste keyup', function() {
    validateDetails();
  });
  
});