禁用HTML5表单元素的验证

例如，在我的表单中，我想使用新的HTML5表单类型<input type="url" />（有关此类型的更多信息）。

问题是Chrome希望对我有帮助，并为我验证这些元素，除了它会吸引人。如果未通过内置验证，则该元素不会成为焦点。我用预先填充了URL元素"http://"，因此我自己的自定义验证只是将这些值视为空字符串，但Chrome拒绝了。如果我可以更改其验证规则，那也可以。

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

因此，有没有办法关闭或自定义自动验证？

如果要禁用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。

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

我没有在任何其他浏览器中对此进行过测试。

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

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

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

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

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

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

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

您可以将http://in用作占位符文本，而不必尝试绕过浏览器的验证进行最终处理。这是从您链接的页面开始的：

占位符文字

HTML5给Web表单带来的第一个改进是可以在输入字段中设置占位符文本的功能。只要该字段为空且未聚焦，便会在输入字段内显示占位符文本。单击输入字段（或使用Tab键选择）后，占位符文本即消失。

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

当您单击（或选项卡到）位置栏时，占位符文本消失：

具有讽刺意味的是，Firefox 3.5不支持将占位符文本添加到您自己的Web表单中。这就是生活。

占位符支持

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属性的浏览器只会忽略它。没有伤害，没有犯规。查看您的浏览器是否支持占位符文本。

不会完全一样，因为它不会为用户提供“起点”，但至少在一半位置。

我在下面的选择器中找到了带有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">

干杯！！！

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

您可以添加一些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验证的一种方法是禁用元素。

您可以安装简单的chrome扩展程序，并即时禁用https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related的验证

默认情况下，所有内容都将默认运行，但是您可以通过单击工具栏上的扩展图标来禁用html5验证