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

Question

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

如何获取显示消息的空输入字段（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 => {&nbsp; return !node.checkValidity();})console.log(invalid)<form>&nbsp; <input type="text" value="test" required>&nbsp; <input type="text" required>&nbsp; <input type="text" required>&nbsp; <button type="submit">Send</button></form>运行时，invalid将是一组根据您的验证约束无效的输入。