点击事件发生之前需要进行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. 将所有实际处理移至表单提交事件。