HTMLFormElement.reportValidity() 忽略“显示：无”输入字段

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 输入字段而得到错误。

我怎样才能在没有display:none 的情况下只报告表单元素？ 谢谢！

Answer 1

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

Documentation