Jquery 需要在点击事件发生之前进行HTML5表单验证

我目前有一个表单，其中两个提交按钮中的一个可以根据用户的操作进行单击。一个按钮只需将表单提交到另一个php页面，另一个按钮将引入横条签出覆盖，然后在填写后，将提交到另一个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>

$（文档）.ready（函数（）{
$（'form.h5 defaults'）.h5Validate（）；
});
$（'form.h5 defaults'）.submit（函数（）{return$（'form.h5 defaults'）.h5Validate（'allValid'）；}）；
$（“#自定义按钮”）。单击（函数（）{
变量标记=函数（res）{
var$input=$（''）.val（res.id）；
$（'form'）.append（$input.submit（）；
};
var pennNewExtra=Math.abs（newExtra）*100；
StripeCheckout.open({
键：“xxxxxx”，
金额：额外，
货币：美元，
名称：“xxxxxx”，
description:'Add-Ons-$'+Math.abs（newExtra）+'.00'，
panelLabel:“签出”，
令牌：令牌
});
返回false；
});

您永远不希望将操作事件挂起到提交按钮上。您真正需要知道的是在表单提交事件中按下了哪个按钮（如果有）

我会这样做的

单击按钮时添加事件，该事件只会记住在本地变量中单击了哪个按钮

将所有实际处理移到表单提交事件中

---

您永远不希望将操作事件挂起到提交按钮上。您真正需要知道的是在表单提交事件中按下了哪个按钮（如果有）

我会这样做的

单击按钮时添加事件，该事件只会记住在本地变量中单击了哪个按钮

将所有实际处理移到表单提交事件中

---

谢谢伊利亚·G。我正在尝试你的方法，但我仍然没有做正确的事情。当存在无效表单且用户单击customButton按钮时，覆盖仍会出现。我的代码太长，不适合此注释，因此保存在这里-我做错了什么？第一个明显的问题是

h5Validate

和

StripeCheckout

未定义。其次，你在表单提交上做了一些奇怪的事情，我想我已经尽可能地纠正了。是的，对不起，我应该提到h5Validate和StripeCheckout是在别处定义的。嗯，我不能完全让你的解决方案工作，但看到你如何做了几件事确实帮助我找到了我的原始代码。它可能不漂亮或不理想，但它现在可以根据需要工作。如果表单无效，则两个按钮都不会提交，只向用户显示哪些字段无效。现在，只有当表单有效且所有内容都提交良好时，才会弹出覆盖。谢谢你的帮助谢谢伊利亚·G。我正在尝试你的方法，但我仍然没有做正确的事情。当存在无效表单且用户单击customButton按钮时，覆盖仍会出现。我的代码太长，不适合此注释，因此保存在这里-我做错了什么？第一个明显的问题是

h5Validate

和

StripeCheckout

未定义。其次，你在表单提交上做了一些奇怪的事情，我想我已经尽可能地纠正了。是的，对不起，我应该提到h5Validate和StripeCheckout是在别处定义的。嗯，我不能完全让你的解决方案工作，但看到你如何做了几件事确实帮助我找到了我的原始代码。它可能不漂亮或不理想，但它现在可以根据需要工作。如果表单无效，则两个按钮都不会提交，只向用户显示哪些字段无效。现在，只有当表单有效且所有内容都提交良好时，才会弹出覆盖。谢谢你的帮助-

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;
});