var $form = $('#payment-form'); $form.find('.subscribe').on('click', payWithStripe); /* If you're using Stripe for payments */ function payWithStripe(e) { e.preventDefault(); /* Abort if invalid form data */ if (!validator.form()) { return; } } /* Fancy restrictive input formatting via jQuery.payment library*/ $('input[name=cardNumber]').payment('formatCardNumber'); $('input[name=cardCVC]').payment('formatCardCVC'); $('input[name=cardExpiry').payment('formatCardExpiry'); /* Form validation using Stripe client-side validation helpers */ jQuery.validator.addMethod("cardNumber", function(value, element) { return this.optional(element) || Stripe.card.validateCardNumber(value); }, "Please specify a valid credit card number."); jQuery.validator.addMethod("cardExpiry", function(value, element) { /* Parsing month/year uses jQuery.payment library */ value = $.payment.cardExpiryVal(value); return this.optional(element) || Stripe.card.validateExpiry(value.month, value.year); }, "Invalid expiration date."); jQuery.validator.addMethod("cardCVC", function(value, element) { return this.optional(element) || Stripe.card.validateCVC(value); }, "Invalid CVC."); validator = $form.validate({ rules: { cardNumber: { required: true, cardNumber: true }, cardExpiry: { required: true, cardExpiry: true }, cardCVC: { required: true, cardCVC: true } }, highlight: function(element) { $(element).closest('.form-control').removeClass('success').addClass('error'); }, unhighlight: function(element) { $(element).closest('.form-control').removeClass('error').addClass('success'); }, errorPlacement: function(error, element) { $(element).closest('.form-group').append(error); } }); paymentFormReady = function() { if ($form.find('[name=cardNumber]').hasClass("success") && $form.find('[name=cardExpiry]').hasClass("success") && $form.find('[name=cardCVC]').val().length > 1) { return true; } else { return false; } } $form.find('.subscribe').prop('disabled', true); var readyInterval = setInterval(function() { if (paymentFormReady()) { $form.find('.subscribe').prop('disabled', false); clearInterval(readyInterval); } }, 250);