Merge pull request payolapayments#262 from alexeymetelev/client-side-validation

Add client side validation

Author: peterkeen

CHANGELOG.md

@@ -11,6 +11,7 @@ All notable changes to Payola will be documented in this file.
 - Raise error if `payola_can_modify_customer/subscription?` unimplemented. #246
 
 ### Enhancements
+- Add client side validation to subscription_form_onestep.js
 - Unpegged Stripe gem and stripe-ruby-mock. #255
 - Take optional `stripe_customer_id` when creating a sale. #183
 - Clean up error target HTML attributes. #198

app/assets/javascripts/payola/subscription_form_onestep.js

@@ -6,6 +6,10 @@ var PayolaOnestepSubscriptionForm = {
     },
 
     handleSubmit: function(form) {
+        if (!PayolaOnestepSubscriptionForm.validateForm(form)) {
+            return false;
+        }
+
         $(form).find(':submit').prop('disabled', true);
         $('.payola-spinner').show();
         Stripe.card.createToken(form, function(status, response) {
@@ -14,6 +18,29 @@ var PayolaOnestepSubscriptionForm = {
         return false;
     },
 
+    validateForm: function(form) {
+        var cardNumber = $( "input[data-stripe='number']" ).val();
+        if (!Stripe.card.validateCardNumber(cardNumber)) {
+            PayolaOnestepSubscriptionForm.showError(form, 'The card number is not a valid credit card number.');
+            return false;
+        }
+
+        var expMonth = $( "select[data-stripe='exp_month']" ).val();
+        var expYear = $( "select[data-stripe='exp_year']" ).val();
+        if (!Stripe.card.validateExpiry(expMonth, expYear)) {
+            PayolaOnestepSubscriptionForm.showError(form, "Your card's expiration month/year is invalid.");
+            return false;
+        }
+
+        var cvc = $( "input[data-stripe='cvc']" ).val();
+        if(!Stripe.card.validateCVC(cvc)) {
+            PayolaOnestepSubscriptionForm.showError(form, "Your card's security code is invalid.");
+            return false;
+        }
+
+        return true;
+    },
+
     stripeResponseHandler: function(form, status, response) {
         if (response.error) {
             PayolaOnestepSubscriptionForm.showError(form, response.error.message);