修复HTML5验证错误后的多个表单提交

我有一个表单，我不想提交，直到HTML5验证发挥作用，显示错误等。我已将Save按钮绑定到点击功能。如果用户点击保存按钮，但发现错误（通过HTML验证），然后修复错误，然后再次单击保存按钮，表单被提交两次。如果错误显示和修复周期重复多次，表单会多次提交。修复HTML5验证错误后的多个表单提交

以下代码（也在this fiddle中找到）演示了这一点。点击“保存”而不填写名字/姓氏输入。然后填写输入并再次点击“保存”。您将通过警报消息看到消息＃1至＃3重复两次。奇怪的是验证函数根本没有被第一次点击（空名框）调用，然后在条目有效时被调用两次。

注意：如果在第一次单击“保存”之前填充了框，代码就可以正常工作。

必须有一些我不了解HTML5表单验证和提交事件，但我花了数小时搜索这个并尝试不同的事情无济于事。什么触发了重复提交事件？帮助赞赏！

$('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>

来源

2015-10-18 globalSchmidt

您注册多个点击事件侦听器。对.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/

来源

2015-10-18 00:16:32 buzzsaw

这奏效了！谢谢。你能否解释一下你看到的“多点击事件监听器”，这样我可以在我的代码中发现这个问题？ – globalSchmidt

@globalSchmidt每次点击“#Save”时都会发生事件注册。正在注册的函数是在.on（）函数中'#Save'之后定义的函数。如果页面没有重新加载或者事件没有取消注册，那么每次听到'#Save'点击事件时都会创建该函数的新绑定。这是每次点击按钮时导致函数调用增加的原因。 – buzzsaw

修复HTML5验证错误后的多个表单提交

回答

相关问题