在HTML5验证成功Save发挥作用，显示错误等之前，我不希望提交表单。我将按钮绑定到click函数。如果用户单击“保存”按钮，但发现错误（通过HTML验证），然后修复错误，然后再次单击“保存”按钮，则表单将提交两次。如果错误显示和修复的循环重复了多次，则表单将被多次提交。
以下代码（也在此提琴中找到）演示了这一点。单击“保存”，而不填写名字/姓氏输入。然后填写输入，然后再次单击“保存”。您会在警报消息中看到消息＃1至＃3重复了两次。奇怪的是，首先单击（空名称框）根本没有调用验证函数，然后在条目有效时又调用了两次。
注意：如果在第一次单击“保存”之前填写了方框，该代码就可以正常工作。
关于HTML5表单验证和Submit事件，肯定有些我不了解的东西，但是我花了数小时来进行谷歌搜索，并尝试了各种不同的尝试，但都无济于事。是什么触发了重复提交事件？帮助赞赏！
$('body').on('click','#Save', function (ev) {
//ev.preventDefault();
alert('duh - click captured');
$('#client_form').submit(function (e) {
alert('1 - submit fired');
e.preventDefault();
e.stopPropagation();
handle_client_form(e);
});
});
function handle_client_form(e) {
if (manualValidate(e)) {
alert('3a - good to go; process form inputs');
} else {
alert('3b - invalid form');
}
}
function manualValidate(e) {
if (e.target.checkValidity()) {
alert('2 - validate OK!');
e.stopPropagation();
return true;
} else {
e.stopPropagation();
return false;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="client_form">
<input name="FirstName" placeholder="first name" required/>
<input name="LastName" placeholder="last name" required />
<button id="Save">Save</button>
</form>您正在注册多个单击事件侦听器。调用.off（）将解决此问题。
$('body').on('click','#Save', function (ev) {
//ev.preventDefault();
alert('duh - click captured');
$('#client_form').submit(function (e) {
alert('1 - submit fired');
e.preventDefault();
e.stopPropagation();
handle_client_form(e);
});
$('body').off('click');
});
我在这里更新了您的小提琴：http : //jsfiddle.net/frqgtsdo/
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句