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

Question

如何在不通过jQuery提交的情况下强制执行html5表单验证我在我的应用程序中有这个表单，我将通过AJAX提交它，但我想使用HTML5进行客户端验证。所以我希望能够通过jQuery强制进行表单验证。我想在不提交表单的情况下触发验证。可能吗？

Answer 1

这是一个更通用的方式，有点清洁：

像这样创建你的表单（可以是一个什么都不做的虚拟表单）：

<form class="validateDontSubmit">...

绑定您不想提交的所有表单：

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;})

现在假设你有一个<a>（在...内<form>）点击你想验证表格：

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'});

这里很少有笔记：

• 我注意到你不必实际提交表单进行验证 - 调用checkValidity()就足够了（至少在chrome中）。如果其他人可以在其他浏览器上添加测试这个理论的评论，我会更新这个答案。

• 触发验证的事情不一定要在<form>。这只是一种干净灵活的通用解决方案。