在我的表单中，我想使用新的HTML表单类型，例如<input type="url" />(关于类型的更多信息在这里)。
问题是Chrome想要超级有用，并验证这些元素为我，除了它在这方面很糟糕。如果它没有通过内置验证，除了元素获得焦点之外，没有其他消息或指示。我用“http://”预填充URL元素，所以我自己的自定义验证只是将这些值视为空字符串，但Chrome拒绝了这一点。如果我能改变它的验证规则，那也可以。
我知道我可以回到使用type="text"，但我想使用这些新类型提供的很好的增强(例如:它自动切换到移动设备上的自定义键盘布局):
有没有办法关闭或自定义自动验证?
当前回答
下面是我用来防止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;
});
其他回答
如果您想在HTML中禁用表单的客户端验证，请向表单元素添加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中做了一些测试，如果你捕捉到“无效”事件并返回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://" /> . <按钮类型=“提交”> > < /按钮提交 > < /形式
我还没有在其他浏览器中测试过这个功能。
您可以添加一些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);
您可以将http://作为占位符文本放入，而不是试图绕过浏览器的验证。这是来自你链接的页面:
Placeholder Text The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears. You’ve probably seen placeholder text before. For example, Mozilla Firefox 3.5 now includes placeholder text in the location bar that reads “Search Bookmarks and History”: When you click on (or tab to) the location bar, the placeholder text disappears: Ironically, Firefox 3.5 does not support adding placeholder text to your own web forms. C’est la vie. Placeholder Support IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID · 3.7+ 4.0+ 4.0+ · · · Here’s how you can include placeholder text in your own web forms: <form> <input name="q" placeholder="Search Bookmarks and History"> <input type="submit" value="Search"> </form> Browsers that don’t support the placeholder attribute will simply ignore it. No harm, no foul. See whether your browser supports placeholder text.
它不会完全相同，因为它不会为用户提供“起点”，但它至少已经达到了一半。
