禁用 HTML 表单元素的验证

与其尝试对浏览器的验证进行结束运行，不如将 作为占位符文本放入。这是来自您链接的页面：http://

占位符文本

HTML5 给 Web 表单带来的第一个改进是在输入字段中设置占位符文本的能力。只要输入字段为空且未聚焦，占位符文本就会显示在输入字段内。单击（或按 Tab 键）输入字段后，占位符文本就会消失。

您以前可能见过占位符文本。例如，Mozilla Firefox 3.5 现在在位置栏中包含占位符文本，上面写着“搜索书签和历史记录”：

当您点击（或按 Tab 键指向）位置栏时，占位符文本会消失：

具有讽刺意味的是，Firefox 3.5 不支持将占位符文本添加到您自己的 Web 表单中。C'est la vie.

占位符支持

IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

以下是在自己的 Web 表单中包含占位符文本的方法：

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

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

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

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

我正在使用jquery，以及这个HTML。

// suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
  alert('invalid');
  return false;
});

document.forms[0].onsubmit = function () {
  alert('form submitted');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

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

如果要禁用 HTML 中表单的客户端验证，请将该属性添加到表单元素中。前任：novalidate

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

查看 https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

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

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

我找到了一个带有 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

这是我用来防止 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;
});

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

例如，您还可以使用属性 pattern=“https？：//.+” 覆盖默认模式，以使其更加宽松。

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

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

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

您可以添加一些 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);

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

规避验证的一种方法是禁用该元素。required

在 JSX （JavaScript， React， Angular， Vue &...） 中，您需要在表单中添加（必须使用大写的 camelCase）：noValidateV

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

正如 Jakob S 所说，在纯 HTML 情况下，将 add to form 元素：novalidate

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