Question

我有一个带有两个按钮的表单 - 一个是＆＃34;提交＆＃34;在表单末尾的按钮，在表单的中间我有一个＆＃34;添加＆＃34;按钮，只要单击它，就会使用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浏览器验证能够触发＆＃34; name＆＃34;和＆＃34;电子邮件＆＃34;单击＆＃34;添加＆＃34; （但不是＆＃34;标题＆＃34;字段）以及触发＆＃34;标题＆＃34;的浏览器验证当我点击＆＃34;提交时，字段（但不是＆＃34;名称＆＃34;和＆＃34;输入＆＃34;字段）。＆＃34;有没有办法实现这个目标？

Answer 1

您可以在

所需的字段中添加或删除属性“required”

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

Answer 2

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

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

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

Answer 3

您是否有任何特殊原因想要首先使用HTML5验证您的表单？我觉得你需要的东西很容易用Javascript完成，你注意到你的添加按钮无论如何都会使用javascript。另外，为什么你的表单验证会以如此奇怪的方式进行分区？

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

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

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

3 个答案: