我目前有一个表单,根据用户的操作,可以点击两个提交按钮之一。一个按钮只是将表单提交到另一个php页面,另一个按钮将带入Stripes checkout overlay,然后,在填写之后,将提交到另一个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>
答案 0 :(得分: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;
});