javascript - HTML5 表单必需属性。如何检查所需的消息是否已显示？

Question

我有一个多页表单，其中包含一些具有必需属性的输入。如果具有必需属性的输入为空或不为空，我想隐藏或显示按钮。 我怎样才能用 JavaScript 做到这一点？

Answer 1

验证失败的元素将匹配 :invalid伪选择器。您可以匹配它以隐藏下一个元素:

input:invalid {
  border-color: red;
}

input:invalid + span {
  display: none;
}

<input required>
<span>
  <button>Submit</button>
</span>

如果您有多个元素，并且您想根据是否存在不良情况来显示或隐藏某些内容，您应该知道 <form>包含:invalid元素也是:invalid :

input:invalid {
  border-color: red;
}

input:valid + span {
  display: none;
}

form:invalid + div {
  display: none;
}

<form>
  <input required>
  <span>First name required!</span>
  <br>

  <input required>
  <span>Last name required!</span>
  <br>
</form>
<div>
  <button>Submit</button>
</div>