javascript - 覆盖 html5 验证

Question

我正在制作一个简单的登录表单，其中包含两个字段:

<form>
  <input type="email" name="email" required />
  <input type="password" name="password" required />
  <button type="submit">Log in</button>
</form>

对于现代浏览器，验证是自动触发的。

但是，如果可以使用 Javascript，我想接管 html5 表单验证，自己处理所有事情。

我想自动验证“onblur”(仅受影响的字段)并且我想在单击“提交”时验证所有字段。

然而，onblur 事件工作正常。当按下“提交”时，不会触发标准的“提交”事件。但是，触发了“无效”事件；但仅限于第一个无效事件。

告诉浏览器忽略所有与 HTML5 相关的验证并接管整个过程的好方法是什么？

Answer 1

请注意，即使某些浏览器可能支持 INPUT 元素上的 novalidate 属性，HTML 代码也不会验证。

根据文档，没有这样的属性。只有 FORM 元素可以包含 novalidate 属性。

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
• http://www.w3.org/TR/html5/forms.html#the-form-element
• http://www.w3.org/TR/html5/forms.html#the-input-element