1

我有一个带有两个按钮的表单 - 一个是表单末尾的“提交”按钮，在表单中间我有一个“添加”按钮，该按钮使用 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 浏览器验证在“名称”和“电子邮件”字段上触发，并且浏览器验证在“标题”字段上触发（但不是“名称” ”和“输入”字段）当我单击“提交”时。有没有办法做到这一点？

4

3 回答 3

1

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

                $('#field_id').attr('required','true');
                $('#field_id').removeAttr('required');
于 2013-06-26T12:19:34.883 回答
0

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

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

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

于 2012-04-16T23:21:30.293 回答
0

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

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

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

于 2012-04-17T02:03:55.977 回答