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

我有一个带两个按钮的窗体 - 一个是窗体末尾的“提交”按钮，在窗体的中间我有一个“添加“按钮，使用Javascript在表单内添加隐藏的输入元素。HTML5浏览器验证 - 1表单，2个按钮，需要更改验证

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

<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浏览器验证在单击“添加”（但不是“标题”字段）和浏览器验证以触发“标题”字段时触发“名称”和“电子邮件”字段而不是“名称”和“输入”字段），当我点击“提交”。有什么办法可以做到这一点？

来源

2012-04-16 chrisjbaik

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

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

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

来源

2012-04-17 02:03:55 Johnnyoh

你是完全正确的要求。只是感觉懒惰和好奇的浏览器验证，知道它将在未来扩大。 – chrisjbaik 2012-04-17 14:51:35

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

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

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

来源

2012-04-16 23:21:30 Bergi

“需要”到田间地头，您可以添加或删除属性，你通过

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

来源

2013-06-26 12:19:34

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

回答

相关问题