Need to do HTML5 form validation before click event happens

Question

I currently have a form where one of two submit buttons will be available to click on depending on a user's actions. One button will just submit the form to another php page, the other button will bring in Stripes checkout overlay and then, after that's filled out, will submit to another php page. I would like my html5/jquery validation to stop the overlay from coming in if the form isn't valid.

Currently, if the form isn't valid and the user clicks the regular submit button it does nothing and shows the fields that need to be corrected (what I want). If the form isn't valid and the user clicks the Stripe overlay button the overlay comes up but when the user fills out the fields and clicks submit the overlay goes away and nothing happens because the form isn't valid (it shows the user what fields need to be corrected). This isn't ideal because the user will have to fix any fields that aren't valid and then fill out the overlay form again before submitting. Again, what I'd like to happen is neither button does anything until the form is completely valid.

<button type='submit' name='saveSubmit' id='saveSubmit'>Save Order</button>

<button type='submit' name="customButton" id="customButton">Save Order and Pay</button>

and the jQuery functions:

 <script>
$(document).ready(function () {
$('form.h5-defaults').h5Validate();
});
$('form.h5-defaults').submit(function () { return $('form.h5-defaults').h5Validate('allValid'); });


$('#customButton').click(function(){
  var token = function(res){
    var $input = $('<input type=hidden name=stripeToken />').val(res.id);
    $('form').append($input).submit();
  };

    var pennNewExtra = Math.abs(newExtra) * 100;

  StripeCheckout.open({
    key:         'xxxxxx',
    amount:      pennNewExtra,
    currency:    'usd',
    name:        'xxxxxx',
    description: 'Add-Ons - $' + Math.abs(newExtra) + '.00',
    panelLabel:  'Checkout',
    token:       token
  });

  return false;
});
</script>

Answer 1

You never want to hang action events onto submit buttons. All you really need to know is which (if any) button was pressed when inside the form submission event.

Here is how I would go about it http://jsfiddle.net/Gf4Cg/4/

var submitButton;

$("form button[type=submit]").click(function () {
    submitButton = this.name;
});

$("form").submit(function (evt) {
    if ( /* !validated */ false) 
        return false;

    if (submitButton == "submit2") {
        submitButton = null; // reset marker for future submits
        alert("Show more stuff!")
        return false;
    }

    // regular submit
    return true;
});

1. Add event on button click that simply remembers which button was clicked in a local var.
2. Move all actual processing into the form submit event.