如何在不通过jQuery提交的情况下强制执行html5表单验证

Question

如何在不通过jQuery提交的情况下强制执行html5表单验证

我在我的应用程序中有这个表单，我将通过AJAX提交它，但我想使用HTML5进行客户端验证。所以我希望能够通过jQuery强制进行表单验证。

我想在不提交表单的情况下触发验证。可能吗？

Answer 1

这是一个更通用的方式，有点清洁：像这样创建你的表单（可以是一个什么都不做的虚拟表单）：<form&nbsp;class="validateDontSubmit">...绑定您不想提交的所有表单：$(document).on('submit','.validateDontSubmit',function&nbsp;(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//prevent&nbsp;the&nbsp;form&nbsp;from&nbsp;doing&nbsp;a&nbsp;submit &nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault(); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false;})现在假设你有一个<a>（在...内<form>）点击你想验证表格：$('#myLink').click(function(e){ &nbsp;&nbsp;//Leverage&nbsp;the&nbsp;HTML5&nbsp;validation&nbsp;w/&nbsp;ajax.&nbsp;Have&nbsp;to&nbsp;submit&nbsp;to&nbsp;get&nbsp;em.&nbsp;Wont&nbsp;actually&nbsp;submit&nbsp;cuz&nbsp;form &nbsp;&nbsp;//has&nbsp;.validateDontSubmit&nbsp;class &nbsp;&nbsp;var&nbsp;$theForm&nbsp;=&nbsp;$(this).closest('form'); &nbsp;&nbsp;//Some&nbsp;browsers&nbsp;don't&nbsp;implement&nbsp;checkValidity &nbsp;&nbsp;if&nbsp;((&nbsp;typeof($theForm[0].checkValidity)&nbsp;==&nbsp;"function"&nbsp;)&nbsp;&&&nbsp;!$theForm[0].checkValidity())&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return; &nbsp;&nbsp;} &nbsp;&nbsp;//if&nbsp;you've&nbsp;gotten&nbsp;here&nbsp;-&nbsp;play&nbsp;on&nbsp;playa'});这里很少有笔记：我注意到你不必实际提交表单进行验证 - 调用checkValidity()就足够了（至少在chrome中）。如果其他人可以在其他浏览器上添加测试这个理论的评论，我会更新这个答案。触发验证的事情不一定要在<form>。这只是一种干净灵活的通用解决方案。