A credit card form using jQuery.payment

form.html

<!-- this should be inside as part of your <form> element -->
<div class="form-row cardInfo__cc-exp">
  <label for="cc-exp">
    <abbr title="required">*</abbr>
    <span>Expires</span>
  </label>
  <!-- we set type="tel" because HTML5 validations don’t play well with type="number" -->
  <input id="cc-exp" type="tel" data-stripe="expiry" class="cc-exp" placeholder="MM / YY" autocompletetype="cc-exp" required="required">
</div>

validations.js

// include jquery and jquery.payment before here

$(function() {
  
  var validateExpiry = function() {
    // set variables for the expiry date validation and expiry 'splitter' object
    var expiry = $('.cc-exp').payment('cardExpiryVal');
    var validateExpiry = $.payment.validateCardExpiry(expiry["month"], expiry["year"]);
    // perform an 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 is again if the expiry becomes invalid
      $('.cc-exp').removeClass('identified');
    }
  }
  
  // this runs the above function every time stuff is entered into this expiry input
  $('.cc-exp__live').bind('change paste keyup', function() {
    validateExpiry();
  });

});

Awesome

loved it 😘

Placed styles.css in <style> and validations.js in <script> but its not working for me :-(