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

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