为什么 checkValidity 或 reportValidity 会触发 jquery 中表单的自动提交？

Question

考虑以下代码：

$("button[type='submit']").click(function(e){ 
  if($(this).closest("form").checkValidity()) {
    $(this).closest("form").reportValidity();
  }   
  e.preventDefault();   
  alert("Never happens!!!");   
});

如果输入数据有效，然后我按下提交按钮，则提交 php 表单，而不会让 e.preventDefault(); 和 alert("Never happens!!!"); 执行。我怀疑这是因为checkValidity 和reportValidity 返回true，它充当return true; 语句。

考虑这段代码：

$("button[type='submit']").click(function(e){         
  e.preventDefault();   
  alert("Does happen!!!");   
});

这次我看到了警报，意思是preventDefault 阻止了表单的提交。即使checkValidity和reportValidity返回true，我有什么奇怪的，它们如何充当jquery点击函数的返回语句？

需要注意的是，下面的方法也不起作用：

$("button[type='submit']").click(function(e){ 
  e.preventDefault(); 
  if($(this).closest("form").checkValidity()) {
    $(this).closest("form").reportValidity();
  }          
  alert("Never happens!!!");   
});

我认为preventDefault 阻止checkValidity 和reportValidity 正常工作并迫使它们返回false，这在某种程度上充当return false; 语句导致alert 不被执行。

另一种可能的解释是调用checkValidity 或reportValidity 会导致表单被提交。不知道为什么会这样。

请参考官方文档说明。

Answer 1

checkValidity() 和 reportValidity() 不是 jQuery 对象的方法。您需要在底层 form Element 对象上调用它们。

从上下文看来，if 条件中的逻辑需要反转，以便仅在表单为 无效 时调用 reportValidity() - 以及 e.preventDefault()停止实际的表单提交。

$("button[type='submit']").click(function(e) {
  let form = $(this).closest('form').get(0);
  if (!form.checkValidity()) {
    form.reportValidity();
    e.preventDefault();
  }

  console.log("Will always happen");
});

<form>
  <input type="text" name="foo" value="" required />
  <button type="submit">Submit</button>
</form>

话虽如此，当您将required 属性应用于表单中的任何控件时，您的 JS 代码是完全多余的，因为默认情况下您会免费获得这种确切的行为：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" name="foo" value="" required />
  <button type="submit">Submit</button>
</form>