问题标签 [html5-validation]

所以我写了一个小的jsfiddle突出了这个问题：

如果代码在 Firefox 或 Edge 上运行，验证气泡会出现在正确的位置：

但 Chrome 会这样做：

如何确保验证气泡位于正确的位置？我需要在 Chrome 中做一些额外的事情吗？

我已经在两台单独的 PC 上对此进行了测试以复制该问题，我正在使用 version 54.0.2840.99 m (64-bit)。

我只需要禁用HTML 5 验证的错误消息。我的意思是验证应该在那里。用户不会在不填写文本字段的情况下提交表单。即使用户不填写文本文件，我也不想显示任何消息，例如“请填写此文件”。

如您在验证错误消息的这张图片中所见，错误消息显示在右侧太远

我应该如何修复 html5 的验证消息位置？

我创建了一个登录页面。它有一个包含用户名和密码字段的表单。用户名应该是一个带有电子邮件类型的文本，密码是一个需要满足正则表达式模式的密码类型的文本。

一切都按预期工作。我面临的问题是，当用户输入无效的用户名时，错误消息在不同浏览器中的显示方式不同，如下所示。

IE浏览器

谷歌浏览器

火狐浏览器

这完全取决于浏览器处理 HTML5 的方式吗？是否可以在不编写太多代码的情况下对错误消息进行通用设计。

提前致谢

我集成了新的隐藏 reCAPTCHA (v2) 框架，该框架默认使用click提交按钮的事件验证用户。但是这个事件是在内置的 HTML5 表单验证之前触发的。我正在寻找一种按预期顺序制作的方法：首先是表单验证，然后是 reCAPTCHA。

我想将 HTML5 约束验证用于注册表单。我有大量的输入，因此，提交按钮不会与某些必填字段同时出现在屏幕上。我发现在 MS Edge 中，如果您尝试在屏幕上没有无效输入的情况下提交表单，它将滚动到无效输入并聚焦，但不会显示验证消息（错误）气泡。除了显示验证方法之外，它将执行其他所有操作。我创建了一个 Codepen 来演示这一点：

http://codepen.io/TheHanna/pen/pRZPae

HTML

CSS

预期行为：点击提交按钮；文本输入滚动查看，带有红色轮廓和一个文本气泡，上面写着“这是一个必填字段”。如果您在该字段无效时输入该字段，则气泡会消失。

实际行为：点击提交按钮；文本输入滚动查看，带有红色轮廓。如果您在输入无效且在视口中聚焦输入，它将显示消息气泡。如果您在该字段无效时输入该字段，则气泡会消失。

我在提交之前做了一些自定义验证，所以我不想只是设置不同的样式，我想指出为什么输入在某种程度上是无效的。我想避免向页面添加更多 HTML 以显示错误消息或使用其他库；功能在那里。我还没有编写解决方案，但我的思路如下：

1. 捕获无效事件
2. 检查无效输入是否在视口中
3. 如果是，继续执行事件，如果不是，滚动查看，确认它在视口中，然后继续执行事件

有没有人遇到过这个问题？这是 Edge 的预期行为，还是已知的错误？还是未知，如果是，我应该在哪里报告？

我有一个密码并确认密码字段，如下所示。在此处输入图像描述

我在其他两种不同的形式中使用了相同的元素和脚本，但它不适用于其中一种形式。

我正在尝试使用带有 --prod 和 --aot 参数的 angular-cli 构建一个 Angular 2 项目。构建失败并出现以下错误： Property 'required' does not exist on type '{ [key: string]: any; }'. 在我的 HTML 中，我在一些输入（必需，模式）上使用了 HTML5 验证器。使用 JiT 编译，这些工作按预期工作。只有在 AoT 编译期间才会出现错误。有没有人见过这个？我希望不必求助于使用 ReactiveForms 方法和使用 Angular Validators 来定义我的所有表单，除非没有办法。

我的表单中有一个日期时间字段：

我表单中的每个字段都具有必需的属性。当我尝试使用未填写的必填字段提交表单时，每个字段都返回 html5 验证消息，除了 datetimepicker。

任何人都可以告诉我，为什么 jQuery datetimepicker 不支持基本的 html5 验证？有没有办法避免这个错误？

我一直在研究要求当任何一个表单组有效时，我的表单中有多个表单组，其余所有表单组必需属性都应删除。为什么，因为在那种形式中，任何一个 uer 就足够了。