覆盖 html5 验证答案

【问题标题】：Override html5 validation覆盖 html5 验证
【发布时间】：2012-02-09 17:53:24
【问题描述】：

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

<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 相关的验证并接管整个过程的好方法是什么？

【问题讨论】：

嘿，请不要接受我的回答并接受威利迪的回答，这是不正确的。

标签： javascript jquery html dom-events

【解决方案1】：

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

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

【讨论】：

+1。 novalidate 属性仅在 form 元素上受支持，并且可以由提交按钮和图像上的formnovalidate 属性仅替换。 “常规”输入没有这样的属性。实际上，我不知道该解决方案在发布答案时是否有效，但截至今天在最新的 Chrome 和 Firefox (demo) 中并没有。 1 2

【解决方案2】：

这个答案不正确。请参阅威利迪的回答。

~~很简单，只需将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');

【讨论】：

但如果 javascript 不可用，我仍然希望浏览器进行验证。
然后用javascript添加novalidate属性。
或者使用 JavaScript 将 required 属性设置为 false。
我自己应该能够想出这个答案 :) 谢谢！
将novalidate 属性添加到输入字段到今天在最新的 Chrome 或 Firefox 中不起作用。请看：stackoverflow.com/questions/9216115/…

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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();
    });

【讨论】：