Instantly share code, notes, and snippets.

@gosseti /form.html
Last active Feb 21, 2017

Embed
What would you like to do?
A credit card form using jQuery.payment
<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>
.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;
}
// 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();
});
});
@kamaroly

This comment has been minimized.

Copy link

kamaroly commented May 4, 2015

Awesome

@Waterloo

This comment has been minimized.

Copy link

Waterloo commented Oct 26, 2015

loved it 😘

@asthago

This comment has been minimized.

Copy link

asthago commented Nov 27, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment