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()我会因为required带有样式的输入中的“空”输入字段而得到错误display:none。

我怎样才能只reportValidity()表单元素而不使用display:none？谢谢！

Answer 1

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

文档