How to partially validate form fields prior to stripe card validation that's in the same form

By : chasemb
Source: Stackoverflow.com
Question!

I have a form the contains customer shipping information and card details. I'm using http://bassistance.de/jquery-plugins/jquery-plugin-validation/ for validation. Right now, all the form fields are validated on form submit, including stripe card validation. The problem is, if a customer enters his/her card information correctly and other areas of the form are not validated, the charge will still go through. Can I validate the billing information prior to running the stripe validation with one submit button without having to break this up into a two step process? See code below. Thanks!

<div class="stripe-errors"><span class="payment-errors"></span></div>                
                <form action="charge.php" method="POST" id="payment-form" class="form"     >
                    <div class="pleft">
                        <label for="firstname">First Name</label>
                        <input type="text" size="20" value="<?php echo $_SESSION['sfirst'] ?>" name="fname" class="required" placeholder="First"/>
                        </label>
                        <label for="lastname">Last Name</label>
                        <input type="text" size="20" value="<?php echo $_SESSION['slast'] ?>" name="lname" class="required" placeholder="Last"/>           
                        <label for="email">Email</label>
                        <input type="text" size="20" value="<?php echo $_SESSION['semail'] ?>" name="email" class="required email" placeholder="[email protected]"/>
                        <label>Shipping Address</label>
                        <input type="text" size="20" value="<?php echo $_SESSION['saddress'] ?>" name="address" class="required" placeholder="Address"/>
                    </div>
                    <div class="pmiddle">
                        <label>City</label>
                        <input type="text" size="20" value="<?php echo $_SESSION['scity'] ?>" name="city" class="required" placeholder="City"/>
                        <label>State</label>
                        <select id="state" value="<?php echo $_SESSION['sstate'] ?>" name="state" class="required" >
                                <option value="">Select State</option>
                                <option value="AK">Alaska</option>
                                <option value="AL">Alabama</option>
                                <option value="AR">Arkansas</option>
                                <option value="AZ">Arizona</option>
                                <option value="CA">California</option>
                                <option value="CO">Colorado</option>
                                <option value="CT">Connecticut</option>
                                <option value="DC">District of Columbia</option>
                                <option value="DE">Delaware</option>
                                <option value="FL">Florida</option>
                                <option value="GA">Georgia</option>
                                <option value="HI">Hawaii</option>
                                <option value="IA">Iowa</option>
                                <option value="ID">Idaho</option>
                                <option value="IL">Illinois</option>
                                <option value="IN">Indiana</option>
                                <option value="KS">Kansas</option>
                                <option value="KY">Kentucky</option>
                                <option value="LA">Louisiana</option>
                                <option value="MA">Massachusetts</option>
                                <option value="MD">Maryland</option>
                                <option value="ME">Maine</option>
                                <option value="MI">Michigan</option>
                                <option value="MN">Minnesota</option>
                                <option value="MO">Missouri</option>
                                <option value="MS">Mississippi</option>
                                <option value="MT">Montana</option>
                                <option value="NC">North Carolina</option>
                                <option value="ND">North Dakota</option>
                                <option value="NE">Nebraska</option>
                                <option value="NH">New Hampshire</option>
                                <option value="NJ">New Jersey</option>
                                <option value="NM">New Mexico</option>
                                <option value="NV">Nevada</option>
                                <option value="NY">New York</option>
                                <option value="OH">Ohio</option>
                                <option value="OK">Oklahoma</option>
                                <option value="OR">Oregon</option>
                                <option value="PA">Pennsylvania</option>
                                <option value="PR">Puerto Rico</option>
                                <option value="RI">Rhode Island</option>
                                <option value="SC">South Carolina</option>
                                <option value="SD">South Dakota</option>
                                <option value="TN">Tennessee</option>
                                <option value="TX">Texas</option>
                                <option value="UT">Utah</option>
                                <option value="VA">Virginia</option>
                                <option value="VT">Vermont</option>
                                <option value="WA">Washington</option>
                                <option value="WI">Wisconsin</option>
                                <option value="WV">West Virginia</option>
                                <option value="WY">Wyoming</option>
                            </select>
                        <label>Zip Code</label>
                        <input type="text" size="20" name="zip" value="<?php echo $_SESSION['szip'] ?>" class="required" minlength="5" placeholder="Zip Code"/>
                        <label>Product Quantity</label>
                        <select id="orderquantity" name="orderquantity" >
                            <option value="1">1 Bottle (30 Day Supply)</option>
                            <option value="2">2 Bottles (60 Day Supply)</option>
                            <option value="3">3 Bottles (90 Day Supply)</option>
                            <option value="4">4 Bottles (120 Day Supply)</option>
                            <option value="5">5 Bottles (150 Day Supply)</option>
                            <option value="6">6 Bottles (180 Day Supply)</option>
                            <option value="7">7 Bottles (210 Day Supply)</option>
                            <option value="8">8 Bottles (240 Day Supply)</option>
                        </select>
                    </div>    
                    <div class="pright">
                        <label>Card Number</label>
                        <input type="text" size="20" autocomplete="off" class="card-number" />
                        <label>CVC Security Code </label>
                        <input type="text" size="4" autocomplete="off" class="card-cvc"/><a class="small-link" data-toggle="modal" href="#cvcs"/>What's this?</a>
                        <label>Card Expiration (ex. 01/2015)</label>
                        <select class="card-expiry-month required ">
                                <option value="">Month</option>
                                <option value="01">01 January</option>
                                <option value="02">02 February</option>
                                <option value="03">03 March</option>
                                <option value="04">04 April</option>
                                <option value="05">05 May</option>
                                <option value="06">06 June</option>
                                <option value="07">07 July</option>
                                <option value="08">08 August</option>
                                <option value="09">09 September</option>
                                <option value="10">10 October</option>
                                <option value="11">11 November</option>
                                <option value="12">12 December</option>
                        </select>
                        <select class="card-expiry-year required">
                                <option value="">Year</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                                <option value="2016">2016</option>
                                <option value="2017">2017</option>
                                <option value="2018">2018</option>
                        </select>
                    </div>
                    <div class="checkbox">
                        <input type="checkbox" style="visibility:hidden;" value="checked" checked="yes"  name="agree" class="required">
                    </div>
                    <div class="purchasebutton">
                        <button type="submit" class="submit-button button green" onclick="return loadSubmit();">Purchase</button>
                    </div> 
                                <div class="cards">
            <img src="/images/trial/cards.png">
        </div>                        
                </form>                                  
    </div>

Form js validation here:

<script src="/js/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://js.stripe.com/v1/"></script>
    <script type="text/javascript" src="/js/modal.js"></script>
    <script type="text/javascript">
    //this validates customer information form fields
    $(document).ready(function() {
        $("#payment-form").validate();
    });
    </script>
    <script type="text/javascript">
        // this identifies your website in the createToken call below
        Stripe.setPublishableKey('<?PHP echo $publishable_api_key ?>');

        function stripeResponseHandler(status, response) {
            if (response.error) {
                // re-enable the submit button
                $('.submit-button').removeAttr("disabled");
                // show the errors on the form
                $(".payment-errors").html(response.error.message);
                document.getElementById("processing").style.visibility = "hidden";


            } else {
                var form$ = $("#payment-form");
                // token contains id, last4, and card type
                var token = response['id'];
                // insert the token into the form so it gets submitted to the server
                form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
                // and submit
                form$.get(0).submit();
            }
        }

        $(document).ready(function() {
          $("#payment-form").submit(function(event) {
            if (!$("input[name=agree]").is(":checked")) {document.getElementById("processing").style.visibility = "hidden";
            return false;
          } else {
          $('.submit-button').attr("disabled", "disabled");
          // createToken returns immediately - the supplied callback submits the form if there are no errors
           Stripe.createToken({
              number: $('.card-number').val(),
              cvc: $('.card-cvc').val(),
              exp_month: $('.card-expiry-month').val(),
              exp_year: $('.card-expiry-year').val()
          }, stripeResponseHandler);
            return false;
                }
            });
            if (window.location.protocol === 'file:') {
                alert("stripe.js does not work when included in pages served over file:// URLs. Try serving this page over a webserver. Contact [email protected] if you need assistance.");
            }
        });
    </script>
By : chasemb


Answers

how about this :

   $("#payment-form").submit(function(event) {
        $("#payment-form").validate();

        if(!$("#payment-form").valid()){
            event.preventDefault();
            $('.submit-button').removeAttr("disabled");
            document.getElementById("processing").style.visibility = "hidden";
            return false;
        }    

        if (!$("input[name=agree]").is(":checked") ) {document.getElementById("processing").style.visibility = "hidden";
        return false;
        }...


This video can help you solving your question :)
By: admin