在我的表单中，我想使用新的HTML表单类型，例如<input type="url" />(关于类型的更多信息在这里)。
问题是Chrome想要超级有用，并验证这些元素为我，除了它在这方面很糟糕。如果它没有通过内置验证，除了元素获得焦点之外，没有其他消息或指示。我用“http://”预填充URL元素，所以我自己的自定义验证只是将这些值视为空字符串，但Chrome拒绝了这一点。如果我能改变它的验证规则，那也可以。
我知道我可以回到使用type="text"，但我想使用这些新类型提供的很好的增强(例如:它自动切换到移动设备上的自定义键盘布局):
有没有办法关闭或自定义自动验证?
当前回答
我找到了一个解决方案，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
其他回答
您可以添加一些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);
如果您想在HTML中禁用表单的客户端验证，请向表单元素添加novalidate属性。例:
<form method="post" action="/foo" novalidate>...</form>
看到https://www.w3.org/TR/html5/sec-forms.html element-attrdef-form-novalidate
在JSX (JavaScript, React, Angular, Vue等)中，你需要在表单中添加noValidate(驼峰大写V是必要的):
<form onSubmit={handleSubmit(data)} noValidate>
正如Jakob S所说，在纯HTML的情况下，添加novalidate到表单元素:
<form method="post" action="/foo" novalidate>...</form>
我阅读了规范，并在Chrome中做了一些测试，如果你捕捉到“无效”事件并返回false，似乎允许表单提交。
我使用jquery，与这个HTML。
//抑制URL输入上的“无效”事件 $('输入(type = " url "])。绑定('无效'，函数(){ alert('无效'); 返回错误; })； document.forms[0]。Onsubmit = function () { 警报(表单提交); }; < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < >形式 <input type="url" value="http://" /> . <按钮类型=“提交”> > < /按钮提交 > < /形式
我还没有在其他浏览器中测试过这个功能。
下面是我用来防止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;
});
