问题标签 [html5-validation]

我们有一个带有约 400 个输入字段的掩码，这些字段都加载在客户端上。掩码由几个选项卡和手风琴组成，使用户能够直接查看和编辑所有必要的字段。在编辑结束时，在客户端验证掩码。

我们将jQuery UI用于选项卡和手风琴，使用jQuery Validation Plugin进行客户端验证。在我们运行 ASP.NET MVC 的服务器上。为了生成具有必要data-val-*属性的 HTML，我们使用了不同的技术：

• 默认 EditorFor-helper 函数 ( @Html.EditorFor(model => model.property)
• 特定的 TextBoxFor、DropDownListFor 辅助函数（`@Html.EditorFor(model => model.property')

• 自定义 HTML 标签，当我们需要特定格式时，例如：

  /li>

但是我们不使用扩展函数生成的字段看起来都非常相似，例如：

如果我value用超过 8 个字符修改此输入，该字段将标记为红色，显示和错误，并且一切正常。

但是，当我按下提交时，验证需要大约 12.5 秒 - 这是我从 IE 得到的 - 分析器：

正如我更新这个问题之前的评论中提到的那样，DOM Manipulations 使执行变得非常缓慢，但我不明白为什么 jQuery-Validation 插件会向我的 HTML 页面添加新元素。在这里您可以看到showLabel执行 DOM 操作的 -function：

然而有趣的是，现在错误标签或任何类似的东西都会显示出来，或者出现在 DOM 上。此外，我们实际上不希望显示任何标签，因为掩码上没有任何空间。我们宁愿使用显示错误的工具提示文本，因为它适用于大多数现代浏览器和 HTML 5 验证。

对于短期解决方案，如果我们能以某种方式禁用（仅针对此掩码）DOM 操作会很好。是否有可能通过一些配置？

更复杂的解决方案是使用 HTML 5 验证而不是 JavaScript，因为我们的客户现在已经使用 IE 9 或 10，如果需要，他们将能够升级到支持它的 10。我从去年 11 月发现了一个关于它的 SO 问题：ASP.NET MVC 5 and HTML 5 form attributes based on the W3C specs - 也许某些东西已经改变或将以这种方式改变？由于所有领域的手动实施将是太多的工作。

出于设计原因，我不能使用

提交表格。相反，代码如下：

表单包含带有

属性。不幸的是，HTML5 验证不能以这种方式工作。不过，它可以与常规提交按钮一起正常工作。

关于为什么的任何想法？有没有办法在不使用提交按钮的情况下触发 HTML5 验证？

根据您的要求编辑：

在我的选择验证代码中

在控制器中我有

如果我单击按钮，则弹出窗口就像正常的 html5 验证一样，而 Angular 的验证不起作用。

这是相同的小提琴。 http://jsfiddle.net/priya78/nF7eJ/65/

如果我删除按钮并使用

我想在单击按钮时以红色文本显示 required 。

有一些相关的问题，并没有真正的帮助。如果我在某些表单中包含所有输入，这将有所帮助。但我不像 angularjs 我只需要一个表单，如果我想知道某个集合中的所有字段是否都有效。此外，HTMLform不堆叠，所以我ng-form只使用。

我实际上不在乎表单是否得到验证，我只想像在这个问题中一样摆脱 Firefox 中的红色边框。有没有办法将发光的红色设置为零大小或透明度或其他？在 Firefox 中我看不到它。

或者，是否有可能教 angularjs 使用其他属性名称而不是required，以便 HTML5 不会跳入视觉破坏我的页面？

更新

实际上，有一个更简单的可能性：因为我根本没有使用 HTML 表单，而且我需要一些顶级容器，它可以是 a<form novalidate>而不是<div>. 太简单了，看不出来。

我有一个包含多个字段和两个按钮的 Web 表单。所有字段都需要验证。

如何根据每个单独的按钮（如验证组）对具有 html5 必需属性的字段进行分组？

我在使用 Google Apps Script HTML Service 时尝试使用 HTML5 表单验证。正如另一位用户所问，根据文档示例，您必须使用按钮输入而不是提交输入。使用提交按钮似乎可以进行验证，但无论如何都会调用服务器函数。给该用户的答案对我不起作用。另外，我想在提交表单时调用两个函数，这会使它变得更复杂。

这就是我想要做的：用户填写表格，我生成一个 Google Doc 并给他 url。当他单击提交按钮时，我向他展示了一个带有漂亮微调器的 jQuery UI 对话框，上面写着“正在创建您的文档”。然后，当文档生成时，我给他链接。当 Google Doc 内容完成时，我使用成功处理程序来显示结果，但同时我需要一个函数来显示微调器。我不知道是否有比在 onclick 事件中添加另一个函数更好的方法来做到这一点，也许它可能会以某种方式破坏进程。如果表单无效（使用 HTML5 验证），有没有办法不调用任何这些函数？

这是我的代码的简化版本：

代码.gs

页面.html

Javascript.html

所有三个 HTML 文档都使用文档中推荐的 include 函数连接在一起（并使用其各自的标签）。

我是 jQuery 的新手，欢迎任何建议。

最后一个问题：对话框中的取消按钮将关闭它，但不会停止创建文档。是否可以停止此过程？我不这么认为。

非常感谢您提前。

正如问题一样，这正是我的要求。

我希望输入字段“5”不为空，我也不希望用户手动编辑该字段。

我想要的是，当用户在 Dropbox 中选择或选择一个项目时，我的 JS 和 PHP 会自动为输入字段“5”分配一个值。（这是我想要的条件）

现在假设；用户提交表单时未选择 dropbox，dropbox 值为默认值，但由于用户未点击 dropbox，JS 将不起作用，不会为输入字段“5”分配任何值，
因此表单将发布为空或输入字段 "5" 没有值， 因为输入字段 "5" 已禁用="" HTML5 验证不起作用

JSFiddle 演示（单击提交按钮，输入字段“5”未验证...）

基于本教程： http: //knockoutjs.com/examples/gridEditor.html 我们在 css 类中有带有验证规则的输入：

如何设置自己的错误消息，例如“此字段中的值是必需的，并且必须是数字。”

我在 IE8 中使用 webshims 来支持 HTML5。我的 HTML5 表单验证在 IE8 中工作。但是当我在弹出窗口中有一个表单时（我正在使用 Angular UI Modal），在表单提交（ng-submit）上，模式框关闭并且验证消息出现在右上角。

我的环境是

• jquery-1.11.1.js
• AngularJS v1.2.26
• Angular UI 模态 0.10.0
• webshim-1.15.4

在控制台中，我收到此脚本错误

“无效元素似乎被隐藏了。使元素可见或使用禁用/只读来禁止验证元素。使用 fieldset[disabled] 可以忽略一组元素！如果选择替换，请参阅 shims/form-combat.js解决问题。”

部分我的 Angular 应用程序 html 加载 webshims

// 下面的方法在 Angular 应用程序中用于在动态视图加载时更新 Polyfill。

我调用弹出/模态的角度函数

我在模态窗口中的表单

我需要验证正确显示在字段旁边的弹出窗口中，感谢任何帮助。

在 Firefox 或 Chrome 中查看这两个小提琴。在这个中，我只有一个带有required属性和submit按钮的简单表单。当框为空时按“提交”会使其样式为invalid（在 Firefox 中，它是红色轮廓）。但它会等到您按下提交以显示它是无效的。

现在试试这个。它是相同的，除了有一些 css：

除了这一次，即使在按下提交之前，也会应用橙色边框颜色。因此，当且仅当您invalid为表单手动设置样式时，浏览器才会在之前应用它，这不是直观的行为。当然，在您输入任何内容之前，必填字段将无效。

有没有办法解决这个问题？