表单提交必填空白字段显示消息“请填写此字段”。答案

【问题标题】：form submit required empty field shows message "Please fill out this field."表单提交必填空白字段显示消息“请填写此字段”。
【发布时间】：2019-11-27 15:18:28
【问题描述】：

想象一下有很多输入字段，带有输入字段的隐藏块或带有输入字段的选项卡式内容...提交表单时，如果任何必需的输入为空，第一个空输入会显示一条消息，例如“请填写这个领域。”在 Firefox 上。

如何获取显示消息的空输入字段 (javascript/jquery)？

<form>
  <input type="text" value="test" required>
  <input type="text" required>
  <input type="text" required>
  <button type="submit">Send</button>
</form>

【问题讨论】：

请澄清您的问题。该字段已显示其消息。
你的意思是你想得到实际的空字段？
他们想要无效的元素（在 JS 中）。
@ScottMarcus：我怎样才能获得显示消息的空输入字段（javascript/jquery）？
@Seth thx, checkValidity 是我需要的。

标签： javascript jquery html

【解决方案1】：

您可以使用 JavaScript 的表单验证 API 来确定哪些输入无效。 checkValidity 就是你想要的。它根据输入的验证约束返回一个布尔值。

const form = document.forms[0];
const required = form.querySelectorAll('[required]');
const invalid = Array.from(required).filter(node => {
  return !node.checkValidity();
})
console.log(invalid)

<form>
  <input type="text" value="test" required>
  <input type="text" required>
  <input type="text" required>
  <button type="submit">Send</button>
</form>

运行时，invalid 将是一个输入数组，根据您的验证约束，这些输入是无效的。

【讨论】：