重写html5验证 [英] Override html5 validation

问题描述

 < form>< p> 
< input type =emailname =emailrequired /> 
< input type =passwordname =passwordrequired /> 
< button type =submit>登入< / button> 
< / form> 
  

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

然而，如果javascript可用，我想要接管html5表单验证，并自己处理所有内容。

我想自动验证'onblur'（仅限于当我们点击'submit'时，我想验证所有字段。

然而，onblur事件工作正常。按'submit'时，标准的提交事件不会被触发。但是，触发'无效'事件;但仅限于第一个无效事件。

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

解决方案

请注意，即使某些浏览器可能支持 INPUT 属性 novalidate >元素 - HTML代码无法验证。

根据文档，不存在这样的属性。只有 FORM 元素可能包含 novalidate 属性。
$ b

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form


• https：//开发者。 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-输入元素

I'm working on a simple login form, with two fields:

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

For modern browsers, validation is automatically triggered.

However, if javascript is available, I want to take over the html5 form validation, and handle everything myself.

I want to validate automatically 'onblur' (only the affected field) and I want to validate all fields when 'submit' is clicked.

The onblur events work fine, however.. When 'submit' is pressed, the standard 'submit' event is not triggered. However, an 'invalid' event is triggered; but only for the first invalid event.

What's a nice way to tell the browser to ignore all HTML5-related validation, and take over the entire process?

解决方案

Please be advised that — even though some browsers may support the attribute novalidate on INPUT elements — the HTML code does not validate.

According to documentation there is no such attribute. Only the FORM element may contain the novalidate attribute.

• 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

这篇关于重写html5验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！