jquery - クリックイベントが発生する前に HTML5 フォームの検証を行う必要があります

Question

現在、ユーザーのアクションに応じて、2 つの送信ボタンのうちの 1 つをクリックできるフォームがあります。1 つのボタンはフォームを別の php ページに送信するだけで、もう 1 つのボタンは Stripes チェックアウト オーバーレイを表示し、入力が完了すると別の php ページに送信します。フォームが有効でない場合、html5/jquery 検証でオーバーレイが入らないようにしたいと思います。

現在、フォームが有効ではなく、ユーザーが通常の送信ボタンをクリックすると、何もせず、修正が必要なフィールドが表示されます(私が望むもの)。フォームが有効でないときにユーザーが Stripe オーバーレイ ボタンをクリックすると、オーバーレイが表示されますが、ユーザーがフィールドに入力して [送信] をクリックすると、オーバーレイは消え、フォームが有効でないため何も起こりません (ユーザーに何を表示するかを示します)。フィールドを修正する必要があります)。これは理想的ではありません。ユーザーは無効なフィールドを修正してから、オーバーレイ フォームに再度入力してから送信する必要があるからです。繰り返しますが、フォームが完全に有効になるまで、どちらのボタンも何もしません。

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

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

および jQuery 関数:

 <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>