禁用HTML5表单元素的验证

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

问题是Chrome想要超级有用，并验证这些元素为我，除了它在这方面很糟糕。如果它没有通过内置验证，除了元素获得焦点之外，没有其他消息或指示。我用"http://"预填充URL元素，所以我自己的自定义验证只是将这些值视为空字符串，但Chrome拒绝了这一点。如果我能改变它的验证规则，那也可以。

我知道我可以恢复使用type="text"，但我想使用这些新类型提供的良好增强(例如:它自动切换到移动设备上的自定义键盘布局):

.

所以,有没有办法关闭或自定义自动验证?

367446 次浏览
小开

你可以将http://作为占位符文本放入，而不是试图绕过浏览器的验证。这是来自你链接的页面:

占位符文本

HTML5对web表单的第一个改进是能够设置输入字段中的占位符文本。只要输入字段为空且未聚焦，占位符文本就会显示在输入字段中。只要单击(或按tab键)输入字段，占位符文本就会消失。

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

enter image description here

当你点击(或标签到)位置栏，占位符文本消失:

enter image description here

讽刺的是，Firefox 3.5不支持在你自己的网页表单中添加占位符文本。这就是生活。

占位符支持

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

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

小开

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

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

小开
最佳答案

如果你想在HTML5中禁用表单的客户端验证，可以在表单元素中添加一个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文件中与伪类相关的条目。如果有人找到了其他解决方案，请告诉我。

小开

我找到了一个解决方案，Chrome与CSS这个下面的选择器没有绕过本机验证形式，这可能是非常有用的。

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

小开

下面是我用来防止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的情况下工作。

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

小开

在你的表单中使用已经即可。

<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验证的一种方法是禁用元素。

小开

在JSX (Javascript, React, Angular, Vue &…)添加noValidate(大写V的camelCase)形成:

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

正如Jakob年代所说，在纯HTML中，将novalidate添加到form元素:

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

提交答案