javascript - 验证没有表单标签的 Html 5 输入?

标签 javascript jquery html

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

最佳答案

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

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

您无法触发 native 验证 UI,但您可以轻松地在任意输入元素上利用验证 API:

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

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

另外,也许可以对您想要实现的目标提供更多解释。我个人发现这可以帮助人们提供详细的解决方案。我常常从未考虑过解决方案。 :) 希望这有帮助!

关于javascript - 验证没有表单标签的 Html 5 输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28426449/

相关文章:

javascript - 字符串格式自定义方法扩展

javascript - 当一个流依赖于另一个流的值时该怎么办?

javascript - 是否可以在元素的属性上设置 JS 监听器?

ajax - 事件不适用于动态创建的元素

javascript - 如果可能的话,我需要帮助逐行理解这个 jQuery 过滤器函数的工作原理

jquery - 使用 jQuery 控制重复的 div

javascript - 如何一键检查特定表格内的所有复选框

javascript - React 组件加载模式(或反模式?)

Jquery 未正确扩展 li 元素

javascript - JSON 中第 40 位的意外标记 t