Question

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

问题在于Chrome希望对我有所帮助并为我验证这些元素，除非它很糟糕。如果内置验证失败，除了获得焦点的元素之外，没有任何消息或指示。我使用"http://"预填充网址元素，因此我自己的自定义验证只会将这些值视为空字符串，但Chrome拒绝这一点。如果我可以更改其验证规则，那也可以。

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

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

Answer 1

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

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

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

Answer 2

我阅读了规范，并在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>

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

Answer 3

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

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

Answer 4

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

占位符文字

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

您之前可能已经看过占位符文字了。例如，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

它不会完全相同，因为它不会为用户提供“起点”，但它至少在那里。

Answer 5

最佳解决方案是使用文本输入并添加属性inputmode =“url”以提供URL键盘功能。 HTML5规范被认为是出于此目的。如果你保持type =“url”你会得到语法验证，这在每种情况下都没用（最好检查它是否返回404错误而不是语法，这是非常宽容的，并没有很大的帮助）。 / p>

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

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

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

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

Answer 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

Answer 7

只需在表单中使用 novalidate 。

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

干杯!!!

Answer 8

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

Answer 9

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

Answer 10

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

规避required验证的一种方法是进行disable the element。

Answer 11

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

默认情况下，一切都将作为默认设置使用，但您只需点击工具栏上的扩展程序图标就可以禁用html5验证

禁用HTML5表单元素的验证

11 个答案:

占位符文字

占位符支持