我有一个有两个按钮的表单-一个是在表单末尾的“提交”按钮,在表单的中间有一个“添加”按钮,每当单击它时,它都会使用Javascript在表单中添加隐藏的输入元素。
下面是两个输入字段/add按钮:
<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-17 02:03:56
首先,有没有什么特殊的原因让您希望使用HTML5来验证表单?我觉得你需要的东西用Javascript很容易就能完成,而且你也注意到你的add按钮无论如何都要用javascript。另外,为什么您的表单验证要以如此奇怪的方式进行分区?
首先,我甚至不喜欢HTML5验证。例如,如果您在HTML5电子邮件输入中键入"asdf@1“,它将接受它。现在,你可以争辩说,从技术上讲,这是一个有效的电子邮件地址,但我认为在实践中,大多数人都会同意,他们不会接受它作为有效的电子邮件地址。您可以使用IP地址代替域名,但我非常怀疑您是否可以使用它作为电子邮件来登录任何现代网页。
但我离题了。要回答您的问题,您可以使用JQuery编写一个快速函数,该函数将根据所单击的按钮覆盖表单验证。为此,您可以捕获该特定输入的HTML5验证抛出的"invalid“错误,并返回false以绕过它。因此,当您单击submit时,您可以覆盖名称和电子邮件表单验证,反之亦然。再说一次,我不知道你为什么要这样做,但这是一个解决方案。
发布于 2013-06-26 12:19:35
您可以通过向所需的字段添加或移除属性" required“
$('#field_id').attr('required','true');
$('#field_id').removeAttr('required');
发布于 2012-04-16 23:21:30
我看到的唯一方法是在单击时动态设置required
属性(或:属性)。
或者,您可以添加和删除invalid
的事件侦听器,这些侦听器似乎会抑制本机的“缺失”/“格式错误”通知-即使它们什么也不做(比如preventDefaultAction或其他)。
我还尝试了带有formnovalidate
属性的按钮和在所选元素上手动提交,但即使触发了“无效”的-events,也不会显示本机对话框,也不会取消提交。(用歌剧测试了所有东西)
https://stackoverflow.com/questions/10182133
复制相似问题