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

Question

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

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，如果该元素无效，则第二个事件处理程序将触发并捕获相应的事件。 这使焦点重新指向该元素，但这可能很烦人，我认为您有一个更好的通知错误的解决方案。 这是上面我的代码的一个有效示例。 如果这样做没有帮助，也许您可​​以发挥创造力并创建一个看起来不像表单的表单。 隐藏提交按钮等。这样您就可以利用该功能。

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

Answer 2

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

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

Answer 3

后来，但它可以帮助新闻搜索。

您可以使用

$(elem)[0].reportValidity()