HTML5 浏览器验证 - 1 个表单，2 个按钮，需要更改验证答案

【问题标题】：HTML5 Browser Validation - 1 form, 2 buttons, need to change validationHTML5 浏览器验证 - 1 个表单，2 个按钮，需要更改验证
【发布时间】：2012-04-28 06:08:06
【问题描述】：

我有一个带有两个按钮的表单 - 一个是表单末尾的“提交”按钮，在表单中间我有一个“添加”按钮，它使用 Javascript 在表单中添加隐藏的输入元素每当它被点击时。

这是两个输入字段/添加按钮：

<input name="name" required>
<input name="email" required type="email">
<button type="submit">Add</button>

然后是另一组输入字段：

<input name="title" required>
<button type="submit">Submit</button>

这些都在一种形式中。

我希望在单击“添加”（但不是“标题”字段）时触发 HTML5 浏览器验证在“名称”和“电子邮件”字段上触发，并在“标题”字段上触发浏览器验证（但不是当我单击“提交”时，“名称”和“输入”字段）。有没有办法做到这一点？

【问题讨论】：

标签： javascript html validation

【解决方案1】：

我看到的唯一方法是在点击时动态设置required 属性（或：属性）。

或者您可以添加和删除 invalid 的事件侦听器，这似乎会抑制原生“缺失”/“错误格式”通知 - 即使它们什么都不做（例如 preventDefaultAction 左右）。

我还尝试了带有formnovalidate 属性的按钮，并在所选元素上手动使用checkValidity()，但即使触发“无效”事件，也不会显示本机对话并且不会取消提交。（用opera测试了一切）

【讨论】：

【解决方案2】：

您是否有任何特殊原因首先要使用 HTML5 来验证您的表单？我觉得您需要使用 Javascript 轻松完成，并且您注意到您的添加按钮无论如何都将使用 javascript。另外，为什么您的表单验证会以这种奇怪的方式进行分区？

一开始我什至不喜欢 HTML5 验证。例如，如果您在 HTML5 电子邮件输入中键入“asdf@1”，它将接受它。现在，您可以说这在技术上是一个有效的电子邮件地址，但我认为实际上大多数人会同意他们不会接受它作为一个有效的电子邮件地址。您可以使用 IP 地址代替域，但我非常怀疑您是否可以将其用作电子邮件来登录任何现代网页。

但我离题了。要回答您的问题，您可以使用 JQuery 编写一个快速函数，该函数将根据单击的按钮覆盖表单验证。您可以通过捕获 HTML5 验证针对该特定输入抛出的“无效”错误并返回 false 来绕过它来做到这一点。因此，当您单击提交时，您可以覆盖名称和电子邮件表单验证，反之亦然，当您单击添加按钮时。同样，我不知道您为什么要这样做，但这是一个解决方案。

【讨论】：

你完全正确。只是对浏览器验证感到懒惰和好奇，知道它会在未来扩展。

【解决方案3】：

您可以在需要的字段中添加或删除属性“必需”

                $('#field_id').attr('required','true');
                $('#field_id').removeAttr('required');

【讨论】：