覆盖 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/元素/表单
• https://developer.mozilla.org/en-US /docs/Web/HTML/Element/input
• http://www.w3.org/TR/html5/forms.html#the-form-元素
• http://www.w3.org/TR/html5/forms .html#the-input-element

Answer 2

这个答案是不正确的。请看willydee的回答。

简单，只需将 novalidate 属性添加到您不希望浏览器验证的任何元素，如下所示：

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

由于您希望仅在 JavaScript 可用时取消验证，因此添加使用 JavaScript（使用 jQuery 作为简化示例）

$('input[novalidate]').attr('novalidate', 'novalidate');

Answer 3

例如，如果您使用 jQuery，另一个选择是删除该属性。

$("input[required],select[required],textarea[required]").removeAttr('required');

Answer 4

也许您可以使用 javascript 将所有“必需”属性转换为“所需数据”，因为您可以使用 javascript 处理它们并使用您自己的处理程序覆盖 html5 表单验证

Answer 5

如果你想进行有条件的 HTML5 验证操作。

我的条件是，如果用户想保存数据，但当它想发送表单时，我想验证，我想停止验证。

<button name="btn_act" value="Submit" type="submit" class="btn">Submit</button>
<button name="btn_act" value="save" type="submit" class="btn">Save</button>

$(document).on('click','[name="btn_act"]',function(){

        var $form = $(this).closest('form');
        //console.log($form);
        if(this.value === 'save')
            $form[0].noValidate = true;
        else
            $form[0].noValidate = false;
        //$form.data('validator').cancelSubmit = true;
        //$form.submit();
    });