A credit card form using jQuery.payment

form.html

<form accept-charset="UTF-8" action="/demos/a-better-card-payment-form" class="simple_form cardInfo" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="sRAFn6dZZqUbp7PpT7RjFb7VQM8VBA1TnivwPQJX7Ak="></div>

      <fieldset class="cardInfo__personalDetails">

        <div class="input string required cardInfo_firstname form-row"><label class="string required" for="cardInfo_firstname"><abbr title="required">*</abbr> First Name</label><input aria-required="true" class="string required" id="cardInfo_firstname" maxlength="60" name="cardInfo[firstname]" placeholder="e.g. Joe" required="required" size="60" type="text"></div>
        <div class="input string required cardInfo_surname form-row"><label class="string required" for="cardInfo_surname"><abbr title="required">*</abbr> Surname</label><input aria-required="true" class="string required" id="cardInfo_surname" maxlength="60" name="cardInfo[surname]" placeholder="e.g. Bloggs" required="required" size="60" type="text"></div>

      </fieldset>

      <fieldset class="cardInfo__cardDetails">

        <span class="payment-errors"></span>

        <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">
            <input id="cc-num" type="tel" class="paymentInput cc-num" placeholder="•••• •••• •••• ••••" autocompletetype="cc-number" required="required">
            <span class="card"></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>

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').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 :-(