javascript - 表单提交必填空字段显示消息 "Please fill out this field."

Question

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

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

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

Answer 1

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

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 将是一个输入数组，根据您的验证约束，这些输入无效。