问题标签 [html5-validation]

我目前正在使用 angular2 进行验证。valid我对 HTML5 电子邮件和网站验证器以及ngModel 的属性有一些问题。

例如：

我输入的每个单词都很好。#email.valid就好像没有 HTML5 验证器存在一样：

所以表单的按钮一直处于启用状态。但是当我点击按钮时，会出现 HTML 警告，说电子邮件字段无效，因此验证正在工作，但#email.valid它仍然是正确的。

是否可以将 angular2 的 ngModel 指令与 HTML5 验证器一起使用？

我求助于使用 Bootstrap 弹出框，因为 HTML5 验证表现出与我现在遇到的相同的行为。也许一个人的解决方案对两者都适用。

JS

HTML（注意我用“data-required”替换了“required”来强制引导例程）。

当带有 HTML5 验证的输入位于浏览器窗口的底部时，HTML5 表单验证弹出窗口将出现在浏览器窗口的“外部”，即无法读取它。

我创建了一个小提琴来显示问题：https ://jsfiddle.net/gy8vhLz9/2/

该弹出窗口在 Firefox 中运行良好，但在 Chromium 51.0 或 IE10 或 IE11 中无法读取。

这只是一个浏览器错误，还是我有可能影响它？

当我的问题包含指向 jsfiddle.net 的链接时，Stackoverflow 会强制我显示代码。这是 jsfiddle 中的 HTML，当我没有输入有效的电子邮件地址时会导致问题：

如果字段无效，如何在悬停时显示 html5 验证错误气泡。目前，当我提交表单并滚动到该元素时，它只显示一个。除此之外，我还想在悬停/聚焦元素时显示错误消息

现在它在提交时只在第一个错误元素上显示一个气泡，在悬停其他元素时它不显示任何气泡。我想要悬停时的气泡

我试图了解为什么我无法根据 HTML5 验证显示浏览器验证错误消息。

我的标记中有一个要验证的字段，以及一个调查其有效性的链接，以便知道是否在点击时触发。值得注意的是，这不在表单中，从阅读HTML5 规范来看，我不清楚这是否是一个问题。当然，我可以对表单外的字段使用 checkValidity 方法这一事实对我来说是值得一看的。

HTML

Javascript/JQuery

从我目前看到的行为来看，当我将其放入无效的电子邮件地址并尝试单击链接时，我希望这会（基于规范）触发一个“简单事件”，正如我明白了吧，是浏览器错误信息显示必须挂钩的。

但相反，不会出现验证消息。验证确实失败并且阻止了链接跟踪，如果我填写有效的电子邮件，则相反。我是否遗漏了有关如何触发或处理事件的信息？

还有其他答案涉及在该字段周围创建一个表单和提交按钮，这将是我的最后手段，但这是获得所需功能的许多额外无意义的噪音，我想了解我的根本原因我看到了。

我遇到了一个问题，默认 HTML5 前端表单验证不适用于我创建的 Symfony 3 表单中的特定字段。

字段本身是自定义字段类型的实例，它是 EntityType 类的子类。选项可以通过 jQuery 动态添加到该字段，这些更改通过在 PreSumbmitEvent 回调中添加新选项反映在表单对象中。所有这些都有效。

我遇到的问题是由我必须使用的一个 jquery 插件引起的，它隐藏了 Symfony Forms 生成的选择字段，并向其附加了一个由复选框下拉菜单组成的多选小部件。当复选框被选中时，这些复选框会从隐藏的选择元素中动态选择选项。

问题：
选择元素被隐藏的事实也隐藏了 HTML5 前端验证提供的工具提示，因此当用户没有填写此字段时，表单会静默失败。

显然，HTML5 前端验证无法验证一组复选框，这意味着我无法使用 HTML5 的内置表单验证将验证委托给小部件。使用 Symfony 的 'error_mapping' 功能也不起作用，因为该小部件没有在表单类中定义。我想为此字段实现某种自定义前端验证，但我不确定如何在该字段为空的情况下停止使用 javascript 提交表单。

我的问题：
如何阻止 symfony 表单在前端提交？什么是 HTML5 前端验证来阻止 Symfony 表单提交，我有没有办法使用 javascript 来做到这一点？

感谢您的任何意见。

使用 Angular 2 (2.0.0) ，使用Angular Forms根据需要动态标记字段的推荐方法是什么？

在他们所有的例子中，所需的属性只是添加如下：

如果我绑定的模型有一个IsRequired属性，那将是真/假？

如果我使用类似的东西：

这在页面上呈现（注意="true"）：

出于某种原因，当 Angular 具有实际值（ ="true" ）时，Angular 似乎无法识别此属性，因此当此字段为空白时，我的表单本身仍然有效：

所以看起来我必须使用required而不是required="true"，但我怎样才能动态添加该属性？

什么也不起作用：

以为我可能有一个函数可以根据字段返回我的字符串“必需”，这只会给出模板错误。

有没有办法做到这一点并只required为我的属性渲染？或者当它的值为真/假时让Angular识别这个属性的方法？

FWIW - 我已经验证我可以使用基于我的属性*ngIf编写两个几乎相同的控件并使用该属性对一个进行硬编码，但这看起来很hacky。希望有更好的方法！<input type='text' />IsRequiredrequired

为什么它在下面这么远？看起来它在“By”字段下。

这是 checkIfFilled() 函数

但是，删除它仍然不会影响消息。

我的表单中有多个字段，例如

我可以创建像必需的前十进制这样的东西，这样我就不必每次都写模式和自定义消息

我是第一次使用 html 5，所以如果您需要更清楚地了解问题，请帮助我，让我知道谢谢

在一个 HTML 页面中，有 5 种不同的形式。其中四个处于引导模式。主表单提交上的所有表单都会弹出 HTML5 验证。除了提交表单之外，我们如何禁用表单的 HTML5 验证？