验证没有表单标签的 Html 5 输入？

Question

是否可以在没有表单标签的情况下触发浏览器内置的 html 5 验证过程？如果我的输入控件在不使用表单标记的情况下无效，我想显示浏览器错误消息。我知道我可以使用 checkValidity 函数检查验证，但是如何告诉浏览器触发验证过程？

原文由 Imran Qadir Baksh - Baloch 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我同意 CBroe 的观点，我不确定您是否可以在没有实际表单的情况下使用 HTML5 表单验证。我找到了这个链接，它应该对您有用：

https://stackoverflow.com/a/7562439/4092442

您无法触发本机验证 UI，但您可以轻松地在任意输入元素上利用验证 API：

 $('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

第一个事件一旦失去焦点就会在每个输入元素上触发 checkValidity ，如果元素无效，则相应的事件将被触发并被第二个事件处理程序捕获。这会将焦点重新设置到元素上，但这可能会很烦人，我假设您有更好的解决方案来通知错误。这是我上面的代码的一个工作示例。如果这没有帮助，也许您可以发挥创意并创建一个看起来不像表格的表格。隐藏提交按钮等。这样您就可以利用该功能。

另外，也许就您要完成的工作提供更多解释。我个人发现这有助于人们提供详细的解决方案。我经常甚至从未考虑过的解决方案。 ：） 希望这可以帮助！

原文由 Asterisk Loftis 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这绝对有可能使用 .reportValidity() ，不知道为什么其他答案说不是。检查所有输入有效性的示例：

document.querySelectorAll('input').forEach(e => e.reportValidity())

原文由 cornzz 发布，翻译遵循 CC BY-SA 4.0 许可协议