點擊事件發生之前需要進行HTML5表單驗證

Question

我目前有一個表單，其中可以根據用戶的操作單擊兩個提交按鈕之一。 一個按鈕將僅將表單提交到另一個php頁面，另一個按鈕將引入Stripes結帳覆蓋，然后，在填寫之后，將提交到另一個php頁面。 我希望我的html5 / jquery驗證在表單無效的情況下阻止疊加層進入。

當前，如果表單無效，並且用戶單擊常規的提交按鈕，它將不執行任何操作，並顯示需要更正的字段（我想要的）。 如果表單無效，並且用戶單擊“條帶覆蓋”按鈕，則將顯示覆蓋，但是當用戶填寫字段並單擊提交時，覆蓋將消失，並且由於表單無效而不會發生任何情況（它將向用戶顯示字段需要更正）。 這是不理想的，因為用戶將不得不修復所有無效字段，然后在提交之前再次填寫覆蓋表單。 再說一次，我想要的是在表單完全有效之前，兩個按鈕都不會執行任何操作。

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

Answer 1

您永遠不想將動作事件掛在提交按鈕上。 您真正需要知道的是在表單提交事件中按下了哪個按鈕（如果有）。

這是我的處理方法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. 單擊按鈕時添加事件，它僅會記住在本地變量中單擊了哪個按鈕。
2. 將所有實際處理移至表單提交事件。