Question

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

如何获取显示消息（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是您想要的。它会根据输入的验证约束返回一个布尔值。

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

表单提交必填字段为空，显示消息“请填写此字段”。

1 个答案: