禁用 HTML5 表单元素的验证答案

【问题标题】：Disable validation of HTML5 form elements禁用 HTML5 表单元素的验证
【发布时间】：2020-10-08 04:20:07
【问题描述】：

在我的表单中，我想使用新的 HTML5 表单类型，例如 <input type="url" /> (more info about the types here)。

问题是 Chrome 想为我提供超级有用的帮助并验证这些元素，但它很烂。如果它未能通过内置验证，则除了元素获得焦点之外没有任何消息或指示。我用 "http://" 预填充 URL 元素，因此我自己的自定义验证只是将这些值视为空字符串，但 Chrome 拒绝了。如果我可以更改其验证规则，那也可以。

我知道我可以恢复使用type="text"，但我希望使用这些新类型提供更好的增强功能（例如：它会自动切换到移动设备上的自定义键盘布局）：

那么，有没有办法关闭或自定义自动验证？

【问题讨论】：

HTML 5.1 草案规范提到了一个inputmode attribute，如果我理解我的理解正确的话，它可以用来指定当用户与字段，没有也暗示任何验证规则。在未来的某个时候，使用inputmode 属性而不是type 属性可能是解决这个问题的正确方法——但目前还不是。
@MarkAmery 虽然现在获得未来不会太难：$('[inputmode]').each(function () { this.attr({type: this.attr('inputmode'), novalidate: true}) });
@MarnenLaibow-Koser 虽然你所描述的工作如果你想做的只是关闭验证（如提问者所指定），它并不能达到与@相同的结果987654333@ 会。按照你的方式做事，你仍然不能（例如）读取用户在number 类型的输入框中键入的非数字值。例如，尝试在this fiddle 的文本框中输入一些非数字的内容，然后单击按钮。
@MarkAmery 很有趣。那是因为<input type='number'> 根本不接受非数字值吗？
@MarnenLaibow-Koser 我想是的。 this question 上关于该问题的已接受答案包括指向规范的链接，回答者声称强制执行此行为。

标签： validation forms html input

【解决方案1】：

如果您想禁用 HTML5 中表单的客户端验证，请向表单元素添加 novalidate 属性。例如：

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

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

【讨论】：

novalidate="novalidate" 和 novalidate="" 也是有效的语法。
@bassim 语法有效，但过于冗长——为什么输入的内容比你需要的多？
@user1569050 例如在像 CakePHP 这样的框架中，当你在 FormHelper::create() 的 $options 数组中设置 novalidate => true 时，它将使用 novalidate="novalidate" 方法。感谢bassim提供的额外信息:)
@rybo111 这是客户端验证，可以减少对服务器的请求数。在服务器端简化验证不是借口。
@martti 我指的是如果我正在测试一些新的 PHP 验证，我可以快速禁用该表单的 JavaScript 验证，以避免必须正确填写整个表单。我应该写“更容易测试”。

【解决方案2】：

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

我正在使用带有这个 HTML 的 jquery。

// 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>

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

【讨论】：

太棒了 - 我明天试试，然后告诉你进展如何。谢谢。
哇！我很难找到提交事件的去向。谢谢楼主！
FireFox 正在验证输入更改。然后不会触发“无效”事件。所以，我没有解决方案。
明天永远不会到来:)
不起作用。我已将代码设为 sn-p。捕获 invalid 事件并返回 false 不会让表单提交。

【解决方案3】：

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

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

【讨论】：

条目叫什么？
哈哈——我不知道了，抱歉。这是3年前的事了。 :(
你的意思是：<form action="" method="" class="" id="" novalidate> ;)

【解决方案4】：

最好的解决方案是使用文本输入并添加属性 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).)*$" 这样的模式防止放前缀，因为我认为放宽一些会更好）

【讨论】：

【解决方案5】：

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

占位符文本

HTML5 为 Web 表单带来的第一个改进是能够设置 placeholder text in an input field。只要字段为空且未聚焦，占位符文本就会显示在输入字段内。一旦您单击（或跳到）输入字段，占位符文本就会消失。

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

当您单击（或跳到）地址栏时，占位符文本会消失：

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

占位符支持
IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·
以下是在您自己的网络表单中包含占位符文本的方法：
<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>
不支持placeholder 属性的浏览器将直接忽略它。没有伤害，没有犯规。 See whether your browser supports placeholder text.

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

【讨论】：

小费+1，但不幸的是，它不会成为我的解决方案。我仍然不想做任何验证，主要是因为它的用户体验太差了。

【解决方案6】：

我在下面的选择器中找到了一个带有 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(29)下不行，不知是不是因为blink

【解决方案7】：

只需在表单中使用 novalidate。

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

干杯！！！

【讨论】：

如何禁用单个输入标签的验证？

【解决方案8】：

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

【讨论】：

很好的解决方案！

【解决方案9】：

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

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

【讨论】：

请提供一个简短的例子。您的回答似乎不完整。
这对我很有用，因为我有隐藏的元素，我想禁用验证。此处禁用示例：jsfiddle.net/yzm4agdp/1

【解决方案10】：

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

【讨论】：