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

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 => {

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