javascript - HTMLFormElement.reportValidity() 忽略 "display:none"输入字段

Question

我正在使用 ajax 调用发送表单。当用户使用表单中的提交按钮时，将调用函数 sendForm()。该函数防止默认情况(提交表单)，并验证表单(对于具有 required 的字段)，如果表单有效，则进行 ajax 调用。

问题是表单包含一些隐藏的 (display:none) 元素，这些元素使用 resportValidity() 调用进行验证，因此表单因以下原因而失败隐藏元素，不应验证它们(它们的显示取决于先前的用户选项)。

使用的sendForm()函数下面:

function sendForm(e) {
  $(e).preventDefault;

  var form = document.getElementById('myForm');

  if (form.reportValidity()) { 

      // form is valid, do ajax call..

  }else{

    alert("Form not valid");

  }
}

因此，当它执行 form.reportValidity() 时，由于 display:none 输入中的“空”required 输入字段，我得到 false > 风格。

如何在不使用 display:none 的情况下直接 reportValidity() 表单元素？谢谢!

Answer 1

如果您不希望在检查有效性时将某个元素包含在表单中，则应禁用该元素。设置 display: none 时，您还应该添加 disabled 属性。

Documentation