禁用 HTML5 表单元素的验证

如果你想禁用 HTML5 中表单的客户端验证，请在表单元素中添加 novalidate 属性。前任：

<form method="post" action="/foo" novalidate>...</form>

请参阅https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

---

我阅读了规范并在 Chrome 中进行了一些测试，如果您捕获“无效”事件并返回 false 似乎允许提交表单。

我正在使用带有此 HTML 的 jquery。

// 抑制 URL 输入上的“无效”事件 $('input[type="url"]').bind('invalid', function() { alert('invalid'); return false; }); document.forms[0].onsubmit = function () { alert('表单提交'); };

提交

我还没有在任何其他浏览器中测试过这个。

---

我只是想补充一点，在表单中使用 novalidate 属性只会阻止浏览器发送表单。浏览器仍然评估数据并添加 :valid 和 :invalid 伪类。

我发现了这一点，因为有效和无效的伪类是我一直在使用的 HTML5 样板样式表的一部分。我刚刚删除了 CSS 文件中与伪类相关的条目。如果有人找到其他解决方案，请告诉我。

---

最好的解决方案是使用文本输入并添加属性 inputmode="url" 以提供 URL 键盘功能。 HTML5 规范就是为此目的而考虑的。如果你保留 type="url" 你得到的语法验证并不是在每种情况下都有用（最好检查它是否返回 404 错误，而不是相当宽松且没有太大帮助的语法）。

您还可以使用属性 pattern="https?://.+" 覆盖默认模式，例如更宽容。

将 novalidate 属性放入表单并不是对所提问题的正确答案，因为它会删除表单中所有字段的验证，并且您可能希望保留对电子邮件字段的验证。

使用 jQuery 禁用验证也是一个糟糕的解决方案，因为它绝对应该在没有 JavaScript 的情况下工作。

就我而言，我在 URL 输入之前放置了一个带有 2 个选项（http:// 或 https://）的选择元素，因为我只需要网站（而不需要 ftp:// 或其他东西）。这样我就避免了输入这个奇怪的前缀（Tim Berners-Lee 的最大遗憾，也许是 URL 语法错误的主要来源），我使用了一个简单的文本输入，带有 inputmode="url" 和占位符（没有 HTTP）。我使用 jQuery 和服务器端脚本来验证网站的真实存在（没有 404）并删除插入的 HTTP 前缀（我避免使用像 pattern="^((?http).)*$" 这样的模式防止放置前缀，因为我认为最好放宽一些）

---

您可以将 http:// 作为占位符文本放入，而不是尝试结束浏览器验证。这是来自您链接的页面：

占位符文本 HTML5 为 Web 表单带来的第一个改进是能够在输入字段中设置占位符文本。只要字段为空且未聚焦，占位符文本就会显示在输入字段内。一旦您单击（或跳到）输入字段，占位符文本就会消失。您之前可能已经看过占位符文本。例如，Mozilla Firefox 3.5 现在在位置栏中包含“搜索书签和历史记录”的占位符文本：当您单击（或 Tab 到）位置栏时，占位符文本消失：具有讽刺意味的是，Firefox 3.5 不支持添加占位符文本到您自己的 Web 表单。这就是生活。占位符支持 IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID · 3.7+ 4.0+ 4.0+ · · · 以下是在您自己的 Web 表单中包含占位符文本的方法：

不支持 placeholder 属性的浏览器会直接忽略它。没有伤害，没有犯规。查看您的浏览器是否支持占位符文本。

它不会完全一样，因为它不会为用户提供那个“起点”，但它至少已经完成了一半。

---

我在下面的选择器中找到了一个带有 CSS 的 Chrome 解决方案，而无需绕过本机验证表单，这可能非常有用。

form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
} 

通过这种方式，您还可以自定义您的消息...

我在此页面上得到了解决方案：http://trac.webkit.org/wiki/Styling%20Form%20Controls

---

只需在您的表单中使用 novalidate 即可。

<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">

干杯！！！

---

您可以添加一些 javascript 来抑制那些令人讨厌的验证气泡并添加您自己的验证器。

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);

---

如果您将表单元素标记为 required=""，则 novalidate="" 无济于事。

绕过 required 验证的一种方法是 disable the element。

---

这是我用来防止 chrome 和 opera 显示无效输入对话框的功能，即使在使用 novalidate 时也是如此。

window.submittingForm = false;
$('input[novalidate]').bind('invalid', function(e) {
    if(!window.submittingForm){
        window.submittingForm = true;
        $(e.target.form).submit();
        setTimeout(function(){window.submittingForm = false;}, 100);
    }
    e.preventDefault();
    return false;
});

---

在 JSX (Javascript, React, Angular, Vue & ...) 中添加 noValidate (camelCase 和大写 V) 形成：

<form onSubmit={handleSubmit(data)} noValidate>

正如 Jakob S 所说，在纯 HTML 中添加 novalidate 到表单元素：

<form method="post" action="/foo" novalidate>...</form>

---