// suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
alert('invalid');
return false;
});
document.forms[0].onsubmit = function () {
alert('form submitted');
};
Submit
另一答案
我只是想补充一点,在表单中使用novalidate属性只会阻止浏览器发送表单。浏览器仍会评估数据并添加:valid和:invalid伪类。
我发现了这一点,因为有效和无效的伪类是我一直使用的HTML5样板样式表的一部分。我刚刚删除了CSS文件中与伪类相关的条目。如果有人找到其他解决方案,请告诉我。
另一答案
您可以将http://作为占位符文本放入浏览器的验证中,而不是尝试结束浏览器的验证。这是您链接的页面:
占位符文本
HTML5为Web表单带来的第一个改进是能够设置placeholder text in an input field。只要字段为空且未聚焦,占位符文本就会显示在输入字段内。单击(或Tab键)到输入字段后,占位符文本就会消失。
您之前可能已经看过占位符文本了。例如,Mozilla Firefox 3.5现在在位置栏中包含占位符文本,其中显示“搜索书签和历史记录”:
单击(或选项卡到)位置栏时,占位符文本将消失:
具有讽刺意味的是,Firefox 3.5不支持将占位符文本添加到您自己的Web表单中。这就是生活。
Placeholder Support
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
· 3.7+ 4.0+ 4.0+ · · ·
以下是您可以在自己的Web表单中包含占位符文本的方法:
它不会完全相同,因为它不会为用户提供“起点”,但它至少在那里。
另一答案
最好的解决方案是使用文本输入并添加属性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)。)* $”防止添加前缀,因为我觉得更宽松更好
另一答案
我找到了一个带有CSS的Chrome解决方案,这个选择器没有绕过可能非常有用的本机验证表单。
form input::-webkit-validation-bubble-message,
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
display:none;
}
通过这种方式,您还可以自定义您的消息...
另一答案
只需在表单中使用novalidate即可。
干杯!!!
另一答案
这是我用来防止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;
});
另一答案
默认情况下,一切都将作为默认设置使用,但您只需单击工具栏上的扩展图标即可禁用html5验证